JavaScrip节点类型之Node节点

基本概念

Node节点是DOM中所有节点的基础节点，所有节点类型都共享着Node节点的属性和方法。

Node节点的常用属性

1、基本属性

nodeType：节点的类型（有12种以数值常量表示的节点类型）。
nodeName：根据不同的节点类型返回不同的节点名称。
nodeValue：根据节点的类型设置或返回节点的值。

*可以在谷歌浏览器上使用下面的代码，查看Node节点上的所有属性和方法。

Node.prototype

2、关系属性

someNode.childNodes：

① 保存着一个由直接子节点组成的NodeList（有序的节点列表）对象，这些子节点有可能是元素、文本节点、注释或处理指令。NodeList对象中的项会随着当前文档内容的更新而实时更新，这是与JavaScript中的数据集合的不同之处。
② NodeList是一种类数组对象，用于保存一组有序的节点，可以通过方括号或使用item()方法访问这些节点。

例子：

//如果标签div、P之间有空格，可能会返回文本节点
//因此需要将标签不留空隙排列在一起
<div><p>0</p><p>1</p><p>2</p></div>

var div = document.getElementsByTagName('div')[0];
console.log(div.firstChild.nodeName); //输出：P
console.log(div.childNodes[0].nodeName); //输出：P
console.log(div.childNodes.item(0).nodeName); //输出：P
console.log(div.childNodes.length); //输出：3

③ 可以使用Array.prototype.slice()方法将NodeList对象转换为数组。

代码如下：

function convertToArray(nodes){
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes, 0);
    } catch (ex) {
        array = new Array();
        for (var i=0, len=nodes.length; i < len; i++){
            array.push(nodes[i]);
        }
    }
    return array;
}

//使用上面的函数
<div><p>0</p><p>1</p><p>2</p></div>

var p_list = document.getElementsByTagName("p");
console.log(Array.isArray(p_list)); 
//输出：false
console.log(Array.isArray(convertToArray(p_list))); 
//输出：true

*上面的代码针对IE8及更早版本做了兼容性处理。

someNode.parentNode：指向当前元素的父节点。
someNode.previousSibling： 指向当前元素的前一个同胞节点。
someNode.nextSibling：指向当前元素的后一个同胞节点。
someNode.firstChild和someNode.lastChild：分别指向其childNodes列表中的第一个和最后一个节点。

例子：

<div id="wrap"><p id="0"></p><p id="1"></p><p id="2"></p></div>

console.log($("0").parentNode.id); //输出：wrap
console.log($("1").previousSibling.id); //输出：0
console.log($("1").nextSibling.id); //输出：2
console.log($("wrap").firstChild.id); //输出：0
console.log($("wrap").lastChild.id); //输出：2

function $(id) {
    return document.getElementById(id);
}

Node节点的常用方法

1、操作节点

appendChild()：添加节点，用于向childNodes列表的末尾添加一个节点。
insertBefore()：插入节点，这个方法接受两个参数：要插入的节点和作为参照的节点。
replaceChild()：替换节点，这个方法接受两个参数：要插入的节点和要替换的节点。
removeChild()：这个方法接受一个参数，即要移除的节点。

例子：

<div>
	<p>0</p>
	<p>1</p>
	<p>2</p>
</div>

var div = document.getElementsByTagName('div')[0]
var p = document.createElement('p')
p.appendChild(document.createTextNode('3'))
div.insertBefore(p, div.lastChild)

浏览器截图：

2、其他方法

hasChildNodes()：这个方法在节点包含一或多个子节点的情况下返回true。

例子：

<div>
	<p>0</p>
	<p>1</p>
	<p>2</p>
</div>

var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes()); //输出：true

//文本节点是P的子节点
var p = document.getElementsByTagName('p')[0];
console.log(p.hasChildNodes()); //输出：true

cloneNode()：这个方法接受一个布尔值参数，在参数为true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为false的情况下( 默认为false )，执行浅复制，即只复制节点本身。

例子：

<div>
	<p>0</p>
	<p>1</p>
	<p>2</p>
</div>

var div = document.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];

div.appendChild(p.cloneNode()); //浅复制
div.appendChild(p.cloneNode(true)); //深复制

浏览器截图：

contains()：这个方法返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。如果传入的节点是其本身，也会返回true。

例子：

<div>
	<p>0</p>
	<p>1</p>
	<p>2</p>
</div>

var div = document.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];

console.log(div.contains(p)); //输出：true
console.log(div.contains(div)); //输出：true

isEqualNode()：这个方法可以判断两个节点是否相等。当两个节点的类型、属性、子节点相同，这两个节点就是相等的。

例子：

<div>
	<p class="style">0</p>
	<p class="style_o">0</p>
	<p class="style">0</p>
	<p class="style">2</p>
</div>

var p_0 = document.getElementsByTagName('p')[0],
    p_1 = document.getElementsByTagName('p')[1],
    p_2 = document.getElementsByTagName('p')[2],
    p_3 = document.getElementsByTagName('p')[3];
    
console.log(p_0.isEqualNode(p_1)); //输出：false
console.log(p_0.isEqualNode(p_2)); //输出：true
console.log(p_0.isEqualNode(p_3)); //输出：false

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。