一、文档树结构
DOM 可以将任何 HTML 或 XML 描绘成一个由多层节点构成的结构。
节点分为不同的类型,每种类型分别表示文档中不同的信息。每个节点都拥有各自的特点、数据和方法,另外也与其他节点存在某种关系。
节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构。
节点类型:元素节点、属性节点、文本节点、注释节点
文档树:
二、节点层级
节点层级:
节点层次常用属性
parentNode: 获取当前元素的父节点(只有一个)
parentNode: 获取当前元素的所有子节点(有多个)
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 节点名称属性(标签名称)
3、nodevalue 节点值
元素节点的 nodeValue 始终是 null