DOM Node类

JavaScript中，所有的节点类型都继承自Node类型，故记录下Node类型的属性和方法。

属性

nodeType属性

这个属性用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示：

Node.ELEMENT_NODE(1);
Node.ATTRIBUTE_NODE(2);
Node.TEXT_NODE(3);
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9);
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(11);

nodeName和nodeValue属性。

对于元素节点，nodeName中保存到的值始终都是元素的标签名，而nodeValue的值则始终为null。

<ul id="container">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<script type="text/javascript">
  var container = document.getElementById('container');
  alert(container.nodeName);          // UL
  alert(container.nodeValue);         // null
</script>

childNodes属性

其中保存着一个NodeList对象，是一个类数组。NodeList的独特之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中。可将其装换为数组。

var container = document.getElementById('container');
var arr = Array.prototype.slice.call(container.childNodes, 0);
alert(container.childNodes);   // [object NodeList]
alert(arr.length);             // 13

在上面的例子中，HTML结构与第一个例子相同，可以看出container的childNodes是一个NodeList类型对象，转换为数组之后，数组长度为13，说明这个属性不仅仅包括Element类型对象。

firstChild和lastChild属性

firstChild属性指向节点的第一个子节点，lastChild属性指向节点的最后一个节点。

parentNode属性

该属性指向文档树中的父节点。

previousSibling和nextSibling属性

这两个属性指向同一个父节点下的前一个同胞节点和后一个同胞节点，同胞节点类型可以为前面所说的任何一种类型。

ownerDocument属性。

此属性指向表示整个文档的文档节点。

var container = document.getElementById('container');
var arr = Array.prototype.slice.call(container.childNodes, 0);
for (var i = 0; i < arr.length; i++) {
  arr[i].onclick = function(event) {
    var target = event.target;
    console.log(target.parentNode === container);
    console.log(target.nextSibling.nodeType === 1);
    console.log(target.ownerDocument === document);
  }
}

在上面的例子中，为container里面的每个子节点都添加了一个点击事件处理程序，点击时验证其父节点是否是container（结果都为true），其下一个同胞节点的nodeType值是否为1（实验证明都是false），验证他们所属的文档节点是否是document节点（结果都为true）。

方法

appendChild()

此方法用于向childNodes列表增加一个节点，返回新增的节点。如果调用appendChild()时传入了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点。

var container = document.getElementById('container');
var returnedNode = container.appendChild(container.firstChild);
alert(returnedNode === container.firstChild);       // false
alert(returnedNode === container.lastChild);        // true

insertBefore()

此方法用于将节点插入到childNodes列表中某个特定的位置，而不是放在末尾。此方法接收两个参数：要插入的节点和作为参照的节点。被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。如果参照节点是null，则insertBefore()与appendChild()执行相同的操作。

// 插入后成为最后一个子节点
var returnedNode = someNode.insertBefore(newNode, null);
alert(newNode === someNode.lastChild);        // true

// 插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode === newNode);              // true
alert(newNode === someNode.firstChild);       // true

// 插入到最后一个子节点前面
var returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode === someNode.childNodes[someNode.childNodes.length - 2]);  // true

replaceChild()和removeChild()

此方法插入一个节点时，该节点的所有关系指针都会从被它替换的节点复制过来。被替换的节点还在文档中，但是已经没有了自己的位置。如果只是想删除一个节点，使用removeChild()方法即可。

// 替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
// 替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

// 移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
// 移除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);