文档对象模型（DOM）是表示文档（比如HTML和Xml）和访问、操作构成文档的各种元素的应用程序接口（API）。一般的，支持 Javascript的所有浏览器都支持DOM。本文所涉及的DOM，是指W3C定义的标准的文档对象模型，它以树形结构表示HTML和Xml文档，定义了遍历这个树和检查、修改树的节点的方法和属性。
DOM眼中的HTML文档：树
在DOM眼中，HTML跟Xml一样是一种树形结构的文档，< html>是根（root）节点，< head>、< title>、< body>是< html>的子（children）节点，互相之间是兄弟（sibling）节点；< body>下面才是子节点< table>、< span>、< p>等等。如下图： dom_tree.gif
这个是不是跟Xml的结构有点相似呢。不同的是，HTML文档的树形主要包含表示元素、标记的节点和表示文本串的节点。
注: 在 FireFox 浏览器中, 您可以通过菜单"工具"->"DOM查看器"来浏览文档的DOM结构; IE 浏览器中您需要下载微软的 Inte.Net Explorer Developer Toolbar 来查看 DOM, 在Java-cn.org/Edit.jsp?page=BrowserDevTool">BrowserDevTool下载此工具.
HTML文档的节点
DOM下，HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型。这里列出Node常用的几种节点类型：
接口 nodeType常量 nodeType值 备注
Element Node.ELEMENT_NODE 1 元素节点
Text Node.TEXT_NODE 3 文本节点
Document Node.DOCUMENT_NODE 9 document
Comment Node.COMMENT_NODE 8 注释的文本
DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片断
Attr Node.ATTRIBUTE_NODE 2 节点属性
DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象（对于HTML文档，这个就是<html>标记）。Javascript操作HTML文档的时候，document即指向整个文档，< body>、< table>等节点类型即为Element。Comment类型的节点则是指文档的注释。具体节点类型的含义，请参考《Javascript权威指南》，在此不赘述。
Document定义的方法大多数是生产型方法，主要用于创建可以插入文档中的各种类型的节点。常用的Document方法有：
方法 描述
createAttribute() 用指定的名字创建新的Attr节点。
createComment() 用指定的字符串创建新的Comment节点。
createElement() 用指定的标记名创建新的Element节点。
createTextNode() 用指定的文本创建新的TextNode节点。
getElementById() 返回文档中具有指定id属性的Element节点。
getElementsByTagName() 返回文档中具有指定标记名的所有Element节点。
对于Element节点，可以通过调用getAttribute()、setAttribute()、removeAttribute()方法来查询、设置或者删除一个Element节点的性质，比如< table>标记的border属性。下面列出Element常用的属性：
属性 描述 tagName 元素的标记名称，比如< p>元素为P。HTML文档返回的tabName均为大写。
Element常用的方法：
方法 描述
getAttribute() 以字符串形式返回指定属性的值。
getAttributeNode() 以Attr节点的形式返回指定属性的值。
getElementsByTabName() 返回一个Node数组，包含具有指定标记名的所有Element节点的子孙节点，其顺序为在文档中出现的顺序。
hasAttribute() 如果该元素具有指定名字的属性，则返回true。
removeAttribute() 从元素中删除指定的属性。
removeAttributeNode() 从元素的属性列表中删除指定的Attr节点。
setAttribute() 把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性。
setAttributeNode() 把指定的Attr节点添加到该元素的属性列表中。
Attr对象代表文档元素的属性，有name、value等属性，可以通过Node接口的attributes属性或者调用Element接口的 getAttributeNode()方法来获取。不过，在大多数情况下，使用Element元素属性的最简单方法是getAttribute()和 setAttribute()两个方法，而不是Attr对象。
使用DOM操作HTML文档
Node对象定义了一系列属性和方法，来方便遍历整个文档。用parentNode属性和childNodes数组可以在文档树中上下移动；通过遍历childNodes数组或者使用firstChild和nextSibling属性进行循环操作，也可以使用lastChild和previousSibling进行逆向循环操作，也可以枚举指定节点的子节点。而调用appendChild()、insertBefore()、removeChild()、 replaceChild()方法可以改变一个节点的子节点从而改变文档树。
需要指出的是，childNodes的值实际上是一个NodeList对象。因此，可以通过遍历childNodes数组的每个元素，来枚举一个给定节点的所有子节点；通过递归，可以枚举树中的所有节点。下表列出了Node对象的一些常用属性和方法：
Node对象常用属性：
属性 描述
attributes 如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。
childNodes 以Node的形式存放当前节点的子节点。如果没有子节点，则返回空数组。
firstChild 以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。
lastChild 以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。
nextSibling 以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。
nodeName 节点的名字，Element节点则代表Element的标记名称。
nodeType 代表节点的类型。
parentNode 以Node的形式返回当前节点的父节点。如果没有父节点，则为null。
previousSibling 以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。
Node对象常用方法：
方法 描述
appendChild() 通过把一个节点增加到当前节点的childNodes组，给文档树增加节点。
cloneNode() 复制当前节点，或者复制当前节点以及它的所有子孙节点。
hasChildNodes() 如果当前节点拥有子节点，则将返回true。
insertBefore() 给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置。
removeChild() 从文档树中删除并返回指定的子节点。
replaceChild() 从文档树中删除并返回指定的子节点，用另一个节点替换它。
接下来，让我们使用上述的DOM应用编程接口，来试着操作HTML文档。
首先举一个最简单的例子, 用 DOM 动态生成一个 Loading 的 IMG 并加入页面中, 当页面完全载入后, 就移除这个 IMG 对象.
<script>// create a loading img and add to pagevar loadingImg = document.createElement("IMG");loadingImg.src = "images/loading_xp.gif";document.body.appendChild(loadingImg);// After page loaded, we remove the loading imagedocument.body.onload = function() {document.body.removeChild(loadingImg);};</script>
AJAX_Follow_Me3_Xml_and_DOM-<a class=tigFont onclick=" displaytip(="" java="" )="">JavaScript_E8_A7_A3_E6_9E_90_E5_92_8C_E7_94_9F_E6_88_90Xml">JavaScript 解析和生成 Xml
用 JS 解析和生成 Xml 一般都是使用 DOMDocument 这个对象, 下面简单的列出其属性和方法:
属性:
Attributes 存储节点的属性列表 (只读)
childNodes 存储节点的子节点列表 (只读)
dataType 返回此节点的数据类型
Definition 以DTD或Xml模式给出的节点的定义 (只读)
Doctype 指定文档类型节点 (只读)
documentElement 返回文档的根元素 (可读写)
firstChild 返回当前节点的第一个子节点 (只读)
Implementation 返回XmlDOMImplementation对象
lastChild 返回当前节点最后一个子节点 (只读)
nextSibling 返回当前节点的下一个兄弟节点(只读)
nodeName 返回节点的名字 (只读)
nodeType 返回节点的类型 (只读)
nodeTypedValue 存储节点值 (可读写)
nodeValue 返回节点的文本 (可读写)
ownerDocument 返回包含此节点的根文档 (只读)
parentNode 返回父节点 (只读)
Parsed 返回此节点及其子节点是否已经被解析 (只读)
Prefix 返回名称空间前缀 (只读)
preserveWhiteSpace 指定是否保留空白 (可读写)
previousSibling 返回此节点的前一个兄弟节点 (只读)
Text 返回此节点及其后代的文本内容 (可读写)
url 返回最近载入的Xml文档的URL (只读)
Xml 返回节点及其后代的Xml表示 (只读)
方法:
appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
cloneNode 返回当前节点的拷贝
createAttribute 创建新的属性
createCDATASection 创建包括给定数据的CDATA段
createComment 创建一个注释节点
createDocumentFragment 创建DocumentFragment对象
createElement 创建一个元素节点
createEntityReference 创建EntityReference对象
createNode 创建给定类型,名字和命名空间的节点
createPorcessingInstruction 创建操作指令节点
createTextNode 创建包括给定数据的文本节点
getElementsByTagName 返回指定名字的元素集合
hasChildNodes 返回当前节点是否有子节点
insertBefore 在指定节点前插入子节点
Load 导入指定位置的Xml文档
loadXml 导入指定字符串的Xml文档
removeChild 从子结点列表中删除指定的子节点
replaceChild 从子节点列表中替换指定的子节点
Save 把Xml文件存到指定节点
selectNodes 对节点进行指定的匹配,并返回匹配节点列表
selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
transformNode 使用指定的样式表对节点及其后代进行转换
transformNodeToObject 使用指定的样式表将节点及其后代转换为对象