DOM节点层次 Node类型

1.nodeType属性
用于表明节点的类型

if(someNode.nodeType==1){  //节点对应的数字表示，适用于所有浏览器
    alert("Node is an element.");
}
if(someNode.nodeType==Node.ELEMENT_NODE){  //IE中无效，它没有Node类型
    alert("Node is an element.");
}

2.nodeName和nodeValue属性
对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的值则始终都是null

if(someNode.nodeType==1){  //节点对应的数字表示
    value=someNode.nodeName;  //nodeName的值是元素的标签名
}

3.节点关系
节点间的各种关系可以用传统的家族关系来描述，相当于将文档树比喻为家谱。每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
注：虽然可以通过方括号语法来访问NodeList的值，而且其有length属性，但它并不是Array。

如何访问保存在NodeLIst中的节点——可以通过方括号，也可以使用item()方法。

var firstChild=someNode.childNodes[0];
var secondChild=someNode.childNodes.item(1);
var count=someNode.childNodes.length;

每个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的所有节点都具有相同的父节点，因此它们的parenNode属性都指向同一个节点。此外，包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中的每个节点的previousSibling和nextSilbing属性，可以访问同一列表中的其他节点。
例：

if(someNode.nextSibling===null){
    alert("Last node in the parent's childNodes List.");
}
else if(someNode.previousSibling===null){
    alert("First node in the parent's childNodes List.");
}

若列表中只有一个节点，那么该节点的nextSibling和previousSibling都为null.
父节点的firstChild和lastChild属性分别指向其childNodes列表的第一个和最后一个节点。
其中，someNode.firstChild的值始终等于someNode.childNode[0],而someNode.lastChild的值始终等于someNode.childNodes[someNode.childNodes.length-1]。
在只有一个子节点的情况下，firstChild和lastChild指向同一个节点。
如下图，则为上述关系：

4.操作节点
（1）appendChild():用于向childNodes列表的末尾添加一个节点

var returnedNode=someNode.appendChild(newNode);
alert(returnedNode==newNode);   //true
alert(someNode.lastChild==newNode);  //true

若在调用appendChild()时传入了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点，如下例所示。

//someNode有多个子节点
var returnedNode=someNode.appendChild(someNode.firstChild);
alert(returnedNode==someNode.firstChild);  //false
alert(returnedNode==someNode.lastChild);  //true

（2）insertBefore():将节点放在childNodes列表中某个特定的位置上，而不是放在末尾。
该方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点。

 //插入后成为最后一个子节点
 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
 
 //插入到最后一个子节点前面
 returnedNode=someNode.insertBefore(newNode,someNode.lastChild);
 alert(newNode==someNode.childNodes[someNode.childNodes.length-2]);  //true

（3）replaceChild()：使用其插入一个节点时，该节点的所有关系指针都会从被它替换的节点复制过来
（4）removeChild():移除节点
这个方法接受一个参数，即要移除的节点，被移除的节点将成为方法的返回值

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

注：上述四种操作方法都是某个节点的子节点，即要使用这几种方法，必须先取得父节点（使用parentNode属性）。另外，并不是所有类型的节点都有子节点，若在不支持子节点的节点上调用了这些方法，将会导致错误。
（5）其他方法
cloneNode（）：用于创建调用这个方法的节点的一个完全相同的副本。
其接受一个布尔值参数，即参数为true时，执行深复制，也就是复制节点及其整个子节点树；参数为false时，执行浅复制，只复制节点本身。
例：有如下HTML代码

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

若将

• 元素的引用保存在了变量myList中，则：

var deepList=myList.cloneNode(true);
alert(deepList.childNodes.length);  //3

var shallowList=myList.cloneNode(false);
alert(shallowList.childNodes.length);  //0