JavaScript 之 节点操作

一、文档树结构

　　　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  代表  文本节点

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

　　3、nodevalue 节点值

　　　　　　元素节点的 nodeValue 始终是 null