DOM 可以将任何 HTML 或 XML 描绘成一个由多层节点构成的结构。

　　　节点（Node）构成 HTML 文档最基本的的单元。

　　　节点分为不同的类型，每种类型分别表示文档中不同的信息。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。

　　　节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。

　　　节点类型：文档节点、元素节点、属性节点、文本节点、注释节点

　　　　整个文档是一个文档节点；

　　　　每个HTML元素是元素节点；

　　　　每个HTML元素是属性节点；

　　　　HTML元素内的文本是文本节点；

　　　　注释是注释节点；

　　　文档树：

二、节点层级

　　　节点层级：

　　　节点层次常用方法

parentNode： 获取当前元素的父节点（只有一个）
childNodes： 获取当前元素的所有子节点（有多个）
children：      获取当前元素的子元素节点
firstChild :     获取第一个子节点
lastChild:       获取最后一个子节点
nextSibling:   获取下一个兄弟节点
previousSibling: 获取上一个兄弟节点
nextElementSibling: 获取下一个兄弟元素节点
previousElementSibling: 获取上一个兄弟元素节点

　　　　注意：

　　　　nextElementSibling和previousElementSibling有兼容性问题，IE9 以后才支持

　　　　firstElementChild 和 lastElementChild 有兼容性问题，IE9 以后才支持

　　　　处理浏览器兼容性：

 1 // 处理浏览器兼容性
 2 // 获取第一个子元素
 3 function getFirstElementChild(element) {
 4     var node, nodes = element.childNodes, i = 0;
 5     while (node = nodes[i++]) {
 6         if (node.nodeType === 1) {
 7             return node;
 8         }
 9     }
10     return null;
11 }
12 
13 // 处理浏览器兼容性
14 // 获取下一个兄弟元素
15  function getNextElementSibling(element) {
16     var el = element;
17     while (el = el.nextSibling) {
18       if (el.nodeType === 1) {
19           return el;
20       }
21     }
22     return null;
23   }

　　　节点操作常用方法

appendChild()
insertBefore()
removeChild()
replaceChild()

三、节点属性

　　1、nodeType 节点类型属性

　　　　返回一个整数，这个数值代表这给定节点的类型，只读类型。

• • 　1  代表  元素节点
    
  •    2  代表  属性节点
  •    3  代表  文本节点

　　2、nodeName 节点名称属性（标签名称）

　　　　代表当前节点的名字，只读属性。如果给定节点是一个文本节点，nodeName 属性将返回内容为 #text 的字符串。

　　3、nodevalue 节点值

　　　　   返回给定节点的当前值(字符串)，可读写的属性

　　　　　　（1）元素节点的 nodeValue 始终是 null

　　　　  （2）属性节点：返回值是这个属性的值

　　　　  （3）文本节点：返回值是这个文本节点的内容

 四、节点操作

　　1、DOM查询

　　2、DOM 增删改