一、文档树结构
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 代表 文本节点
- 1 代表 元素节点
2、nodeName 节点名称属性（标签名称）
代表当前节点的名字，只读属性。如果给定节点是一个文本节点，nodeName 属性将返回内容为 #text 的字符串。
3、nodevalue 节点值
返回给定节点的当前值(字符串)，可读写的属性
（1）元素节点的 nodeValue 始终是 null
（2）属性节点：返回值是这个属性的值
（3）文本节点：返回值是这个文本节点的内容
四、节点操作
1、DOM查询
|
功能 |
API |
返回值 |
|
●在整个文档范围内查询元素节点 |
||
|
根据id值查询 |
document.getElementById(“id值”) |
一个具体的元素节点 |
|
根据标签名查询 |
document.getElementsByTagName(“标签名”) |
元素节点数组 |
|
根据name属性值查询 |
document.getElementsByName(“name值”) |
元素节点数组 |
|
|
||
|
●在具体元素节点范围内查找子节点 |
||
|
查找全部子节点 |
element.childNodes【W3C考虑换行，IE≤8不考虑】 |
节点数组 |
|
查找第一个子节点 |
element.firstChild【W3C考虑换行，IE≤8不考虑】 |
节点对象 |
|
查找最后一个子节点 |
element.lastChild【W3C考虑换行，IE≤8不考虑】 |
节点对象 |
|
查找指定标签名的子节点 |
element.getElementsByTagName(“标签名”) |
元素节点数组 |
|
|
||
|
●查找指定元素节点的父节点：element.parentNode |
||
|
|
||
|
●查找指定元素节点的兄弟节点 |
||
|
查找前一个兄弟节点 |
node.previousSibling【W3C考虑换行，IE≤8不考虑】 |
节点对象 |
|
查找后一个兄弟节点 |
node.nextSibling【W3C考虑换行，IE≤8不考虑】 |
节点对象 |
2、DOM 增删改
|
API |
功能 |
|
document.createElement(“标签名”) |
创建元素节点并返回，但不会自动添加到文档中 |
|
document.createTextNode(“文本值”) |
创建文本节点并返回，但不会自动添加到文档中 |
|
|
|
|
element.appendChild(ele) |
将ele添加到element所有子节点后面 |
|
parentEle.insertBefore(newEle,targetEle) |
将newEle插入到targetEle前面 |
|
|
|
|
parentEle.replaceChild(newEle, oldEle) |
用新节点替换原有的旧子节点 |
|
parentEle.removeChild(childNode) |
删除指定的子节点 |
|
|
|
|
element.innerHTML |
读写HTML代码 |