在DOM眼中，HTML跟XML一样是一种树形结构的文档，<html>是根（root）节点，<head>、<title>、<body>是<html>的子（children）节点，互相之间是兄弟（sibling）节点；<body>下面才是子节点<table>、<span>、<p>等等。如下图：
HTML文档结构.jpg
这个是不是跟XML的结构有点相似呢。不同的是，HTML文档的树形主要包含表示元素、标记的节点和表示文本串的节点。
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()
从文档树中删除并返回指定的子节点，用另一个节点替换它。
分享到：
相关推荐
org.dom4j.dom An implementation of the dom4j API which also supports the W3C object model. org.dom4j.dtd Classes to represent the DTD declarations. org.dom4j.io Provides input and output via SAX and ...
DOM DE DOM DOM。 DOM DE DOM DOM DOMMMMMMM。 W3C DOM API 在 HTML5 解析器和序列化器之上的部分实现。
W3C DOM Activities 文档对象模型 (DOM：Document Object Model) 是一个平台，一个中立于语言的应用程序编程接口 (API)，允许程序访问并更改文档的内容、结构和样式。 DOM Tutorials 如需学习更多有关 DOM 的知识...
libRange 在 IE 8 及更早版本上模拟 W3C DOM Range API。 它基于 TinyMCE 的相同代码，但仅依赖于 jQuery（轻微）和 AMD 实现。 libRange 还有一些在处理文本时很有用的实用方法，以及一些选择和范围记录方法。 ...
dom4j基础入门文档,与 W3C DOM API 相比，使用 dom4j 所包含的解析器的好处是 dom4j 拥有本地的 XPath 支持。
dom4j是一种解析XML文档的开放源代码XML框架。本文介绍如何使用包含在dom4j中的解析器创建并修改...与W3C DOM API相比，使用dom4j所包含的解析器的好处是dom4j拥有本地的XPath支持。DOM解析器不支持使用XPath选择节点。
dom 解析技术是 W3C 组织制定的，而所有的编程语言都对这个解析技术使用了自己语言的特点进行实现。 Java 对 dom 技术解析标记也做了实现。 sun 公司在 JDK5 版本对 dom 解析技术进行升级：SAX（ Simple API for ...
它是org.w3c.dom包的简单包装，可以在需要DOM但又太冗长的地方实现流畅的XML文档创建和操作。 jOOX仅包装基础文档，并且可以用于增强DOM，而不能作为替代方案。 jOOX的流畅性受到启发， 是一种非常好的流利的API，...
javax.xml.transform.dom 此包实现特定于 DOM 的转换 API。 javax.xml.transform.sax 此包实现特定于 SAX2 的转换 API。 javax.xml.transform.stax 提供特定于 StAX 的转换 API。 javax.xml.transform.stream 此...
全书分为3 个部分：第一部分“深入理解DOM 脚本编程”，涉及W3C DOM 规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以Ajax 和客户端—服务器端通信为主题；第三部分“部分高级...
全书分为3 个部分：第一部分“深入理解DOM 脚本编程”，涉及W3C DOM 规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以Ajax 和客户端—服务器端通信为主题；第三部分“部分高级...
档对象模型 (DOM) 是一个平台，一个中立于语言的应用程序编程接口 (API)，允许程序访问并更改文档的内容、结构和样式。 文档对象模型 (DOM) 是一个平台，一个中立于语言的应用程序编程接口 (API)，允许程序访问并...
Ø 1、DOM(org.w3c.dom) Ø “文档对象模型”方式，解析完的Xml将生成一个树状结构的对象。 Ø 2、SAX(org.xml.sax) Ø SimpleAPI for XML，以事件的形式通知程序，对Xml进行解析。 Ø 3、XMLPULL(org.xmlpull.v1) ...
有jdk1.5，1.6，1.7，1.8，1.9汉化版api；jq，js，dom，css的api；oracle的api；spring的api等
《JavaScript权威指南》全面介绍了...本书还包括详细的参考手册，涵盖了JavaScript的核心API、遗留的客户端API和W3C标准DOM API，记述了这些API中的每一个JavaScript对象、方法、性质、构造函数、常量和事件处理程序。
《JavaScript权威指南》全面介绍了...本书还包括详细的参考手册，涵盖了JavaScript的核心API、遗留的客户端API和W3C标准DOM API，记述了这些API中的每一个JavaScript对象、方法、性质、构造函数、常量和事件处理程序
《JavaScript权威指南》全面介绍了...本书还包括详细的参考手册，涵盖了JavaScript的核心API、遗留的客户端API和W3C标准DOM API，记述了这些API中的每一个JavaScript对象、方法、性质、构造函数、常量和事件处理程序
《JavaScript权威指南》全面介绍了...本书还包括详细的参考手册，涵盖了JavaScript的核心API、遗留的客户端API和W3C标准DOM API，记述了这些API中的每一个JavaScript对象、方法、性质、构造函数、常量和事件处理程序。
《JavaScript权威指南》全面介绍了...本书还包括详细的参考手册，涵盖了JavaScript的核心API、遗留的客户端API和W3C标准DOM API，记述了这些API中的每一个JavaScript对象、方法、性质、构造函数、常量和事件处理程序。
《JavaScript权威指南》全面介绍了...本书还包括详细的参考手册，涵盖了JavaScript的核心API、遗留的客户端API和W3C标准DOM API，记述了这些API中的每一个JavaScript对象、方法、性质、构造函数、常量和事件处理程序。