在网页中所有对象和内容都被称为节点，如文档、元素、文本、属性、注释等。节点（Node）是 DOM 最基本的单元，并派生出不同类型的节点，它们共同构成了文档的树形结构模型。

根据 DOM 规范，整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，以此类推。

DOM 支持的节点类型说明如表所示。

使用 nodeType 属性可以判断一个节点的类型，取值说明如表所示。

下面示例演示如何借助节点 nodeType 属性检索当前文档中包含元素的个数。

 

 
 

 
 
 

 在上面的 Script 脚本中定义一个计数函数，然后通过递归调用的方式逐层检索 document 下所包含的全部节点，在计数函数中再通过 node.nodeType == 1 过滤掉非元素节点，进而统计文档中包含的全部元素个数。
 
 

 

 使用 nodeName 和 nodeValue 属性可以读取节点的名称和值。属性取值说明如表所示。
 
 

通过上表可以看到，不同类型的节点，nodeName 和 nodeValue 属性取值不同。元素的 nodeName 属性返回值是标签名，而元素的 nodeValue 属性返回值为 null。因此在读取属性之前，应该先检测类型。

 

 nodeName 属性在处理标签时比较实用，而 nodeValue 属性在处理文本信息时比较实用。
 
 

 

 DOM 把文档视为一棵树形结构，也称为节点数。节点之间的关系包括：上下父子关系、相邻兄弟关系。简单描述如下：
 
 

• 在节点树中，最顶端节点为根节点。
• 除了根节点之外，每个节点都有一个父节点。
• 节点可以包含任何数量的子节点。
• 叶子时没有子节点的节点。
• 同级节点是拥有相同父节点的节点。

 

 针对下面这个 HTML 文档结构。
 
 

 

 在上面的 HTML 结构中，首先是 DOCTYPE 文档类型声明，然后是 html 元素，网页里所有元素都包含在这个元素里。从文档结构看，html 元素既没有父辈，也没有兄弟。如果用树来表示，这个 html 元素就是树根，代表整个文档。由 html 元素派生出 head 和 body 两个子元素，它们属于同一级别，且互不包含，可以称之为兄弟关系。head 和 body
 元素拥有共同的父元素 html，同时它们又是其他元素的父元素，担保函的子元素不同。head 元素包含 title 元素，title 元素又包含文本节点“标准 DOM 示例”。body 元素包含 3 个子元素：h1、p 和 ul，它们是兄弟关系。如果继续访问，ul 元素也是一个父元素，它包含 3 个 li
 子元素。整个文档如果使用树形结构表示，如下图所示。使用树形结构可以很直观的把文档结构中各个元素之间的关系表现出来。
 
 

 
 
 

• parentNode：返回当前节点的父节点，所有的节点都仅有一个父节点。
• childNodes：返回当前节点的所有子节点的节点列表。
• firstChild：返回当前节点的第一个子节点。
• lastChild：返回当前节点的最后一个子节点。
• nextSibling：返回当前节点之后相邻的同级节点。
• previousSibling：返回当前节点之前相邻的同级节点。

 

 childNodes 返回所有子节点的列表，它是一个随时可变的类数组。
 
 

 

 下面示例演示了如何访问 childNodes 中的节点。
 
 

 

 使用中括号语法或者 item() 方法都可以访问 childNodes 包含的子元素。childNodes 的 length 属性可以动态返回子节点的个数，如果列表项目发生变化，length 属性值也会随之变化。
 
 

 

 childNodes 是一个类数组，不能直接使用数组的方法，但是可以通过动态调用数组的方法把它转换为数组。下面示例把 childNodes 转换为数组，然后调用数组的 reverse() 方法颠倒数组中元素的顺序。
 
 

 

 
 

 
 
 

 文本节点和属性节点都不包含任何子节点，所以它们的 childNodes 属性返回值是一个空集合。可以使用 haschildNodes() 方法或者 childNodes.length>0了来判断一个节点是否包含子节点。
 
 

 

 nextSibling 返回下一个相邻节点，previousSibling 返回上一个相邻节点。如果没有同属一个父节点的相邻节点，则返回 null。
 
 

 

 可以使用下面方法访问 body 元素。
 
 

 

 通过下面方法可以访问 span 包含的文本。
 
 

 

 操作节点的基本方法如表所示。
 
 

appendChild()、insertBefore()、removeChild()、replaceChild() 四个方法用于对子节点进行操作。使用这四个方法之前，可以使用 parentNode 属性先获取父节点。另外，并不是所有类型的节点都有子节点，如果在不支持子节点的节点上调用了这些方法将会导致错误发生。

下面示例为列表框绑定一个 click 事件处理程序，通过深度克隆，新的列表框没有添加 JavaScript 事件，仅克隆了 HTML 类样式和 style 属性。

• 所有的HTML元素都是元素节点。
• 所有 HTML 属性都是属性节点。

document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

所有主要浏览器都支持 Document 对象。

HTML文档中可以使用以上属性和方法:

在 W3C DOM核心，文档对象继承节点对象的所有属性和方法。

很多属性和方法在文档中是没有意义的。

HTML 文档对象可以避免使用这些节点对象和属性：