JavaScript 之 节点操作

一、文档树结构

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

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

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

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

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

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

　　　　每个HTML元素是元素节点；

　　　　每个HTML元素是属性节点；

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

　　　　注释是注释节点；

　　　文档树：

 

二、节点层级

　　　节点层级：

          

 　　  

　　　节点层次常用方法

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

　　　　注意：

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

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

　　　　处理浏览器兼容性：

// 处理浏览器兼容性
// 获取第一个子元素
function getFirstElementChild(element) {
    var node, nodes = element.childNodes, i = 0;
    while (node = nodes[i++]) {
        if (node.nodeType === 1) {
            return node;
        }
    }
    return null;
}

// 处理浏览器兼容性
// 获取下一个兄弟元素
 function getNextElementSibling(element) {
    var el = element;
    while (el = el.nextSibling) {
      if (el.nodeType === 1) {
          return el;
      }
    }
    return null;
  }

　　　节点操作常用方法

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

　　

三、节点属性

　　1、nodeType 节点类型属性

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

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

　　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代码