JavaScript之DOM操作（二）

这一篇写写常用并且通用的操作节点的一些方法。

1.节点方法

1>appendChild()

向childNodes列表的末尾添加一个节点，语法 var aChild = element.appendChild(aChild); 

需要注意的是，如果被传入的节点在文档中已经存在，那结果会将该节点从原来位置移除，然后再添加到指定位置。例：

var returnedNode = someNode.appendChild(someNode.firstChild);
console.log(returnedNode  === someNode.firstChild); // false
console.log(returnedNode  === someNode.lastChild); // true

2>insertBefore()

把节点放在childNodes列表中某个指定节点之前，语法 var insertedNode = parentNode.insertBefore(newNode, referenceNode); 

该方法接受两个参数，一个需要传入的节点，一个是参考节点，当参考节点为null时，insertBefore()和appendChild()效果相同。例：

var returnedNode = someNode.insertBefore(newNode, null);
console.log(newNode === someNode.lastChild); // true

3>removeChild()

从DOM中删除一个子节点，返回删除的节点。语法 var oldChild = node.removeChild(child); 

注意，可以使用一个变量如oldChild来保存这个被移除的节点，如果需要，还可以在重新添加到文档中。

4>replaceChild()

用一个节点替换另外一个节点，并返回被替换的节点。语法 var replacedNode = parentNode.replaceChild(newChild, oldChild); 

如上，用newChild替换掉oldChild

5>cloneNode()

节点调用该方法，返回一个该节点的副本。语法 var dupNode = node.cloneNode(deep); 

node将要被克隆的节点，dupNode克隆生成的副本节点，deep 可选是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。

6>contains()

返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。语法 node.contains( otherNode); 

如果 otherNode 是 node 的后代节点或是 node 节点本身.则返回true , 否则返回 false.

7>hasChildNodes()

返回一个布尔值，当前节点有子节点时返回true，否则false。语法 element.hasChildNodes() 

8>normalize()

从MDN上截了一张图：