基本概念
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
文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。
随时随地看视频
