節點層次
節點之間的關係構成了層次，所有頁面標記則表現爲一個以特定節點爲根節點的樹形結構。
文檔節點document是每個文檔的根節點。文檔節點只有一個子節點—<html>文檔元素。文檔元素是文檔的最外層元素，文檔中的所有元素都包含在其中，每個文檔只能有一個文檔元素。
Node類型
| 節點類型 | 數值常量 |
|---|---|
| Node.ELEMENT_NODE | 1 |
| Node.ATTRIBUTE_NODE | 2 |
| Node.TEXT_NODE | 3 |
| Node.CDATA_SECTION _NODE | 4 |
| Node.ENTITY_PEFERENCE _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_FPAGMENT _NODE | 11 |
| Node.NOTATION_NODE | 12 |
// 在IE中無效
if(someNode.nodeType == Node.ELEMENT_NODE){
alert("Node is an element.");
}IE沒有公開Node類型的
// 對所有瀏覽器有效
if(someNode.nodeType == 1){
alert("Node is an element.");
}nodeName和nodeValue屬性
- nodeName:始終保存的是元素的標籤名
- nodeValue:對於元素節點爲空。
節點關係
每個節點都有一個childNodes屬性，其中保存着一個NodeList對象，類似數組，有length屬性，可以通過[]訪問NodeList的值，但它並不是Array的實例，反饋的是一個動態結果，訪問的是某個瞬間的一個值。
var firstChild = someNode.childNodes[0];
var firstChild = someNode.childNodes.item(0);
var count = someNode.childNodes.length;arrayObject.slice(start,end)
//通過call()遍歷將其轉換爲數組
//在IE8及之前版本無效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);IE中將NodeList轉換爲數組必須枚舉所有成員。
function convertToArray(nodes){
var array = null;
try{
//針對非IE瀏覽器
array = Array.prototype.slice.call(node,0);
}catch(ex){
array = new Array();
for (var i = 0, len = nodes.length; i<len; i++ ){
array.push(node[i]);
}
}
return array;
}childNodes列表中所有節點爲子節點，即同胞節點，可通過previousSibling與nextSibling訪問同胞節點。
if(someNode.nextSiling === null){
alert("Last node in the parent's childNodes list.");
}else if(someNode.previousSiling === null){
alert("First node in the parent's childNodes list.");
}操作節點
關係指針是隻讀的，操作方法如下：
| 方法名 | 參數 | 作用 |
|---|---|---|
| appendChild() | 新增節點 | 在childNodes列表的末尾添加節點 |
| insertBefore() | 插入的節點和參照的節點 | 被插入的節點會變成參照節點的前一個同胞節點 |
| replaceChild() | 插入的節點和替換節點 | 被替換的節點由這個方法返回並從文檔樹中移除，同時插入節點 |
| removeChild() | 移除的節點 | 被移除的節點將成爲方法的返回值 |
這些方法必須先取得父節點，並不是所有所有類型都有子節點，再不支持子節點的節點上調用這些方法，將會導致錯誤。