DOM節點分析

文檔中全部的節點之間都存在這樣或那樣的關係。節點間的各類關係能夠用傳統的家族關係來描述，至關於把文檔樹比喻成家譜。在HTML中，能夠將 元素當作是 元素的子元素；相應地，也就能夠將 元素當作是 元素的父元素。而 元素，則能夠當作是 元素的同胞元素，由於它們都是同一個父元素 的直接子元素。

每一個節點都有一個 childNodes 屬性，其中保存着一個 NodeList 對象。 NodeList 是一種類數組對象，用於保存一組有序的節點，能夠經過位置來訪問這些節點。請注意，雖然能夠經過方括號語法來訪問 NodeList 的值，並且這個對象也有 length 屬性，但它並非 Array 的實例。 NodeList 對象的獨特之處在於，它其實是基DOM結構動態執行查詢的結果，所以DOM結構的變化可以自動反映在 NodeList 對象中。咱們常說， NodeList 是有生命、有呼吸的對象，而不是在咱們第一次訪問它們的某個瞬間拍攝下來的一張快照。

下面的例子展現瞭如何訪問保存在 NodeList 中的節點——能夠經過方括號，也可使用 item() 方法。

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

不管使用方括號仍是使用 item() 方法都沒有問題，但使用方括號語法看起來與訪問數組類似，所以頗受一些開發人員的青睞。另外，要注意 length 屬性表示的是訪問NodeList 的那一刻，其中包含的節點數量。對 arguments 對象使用 Array.prototype.slice() 方法能夠將其轉換爲數組。而採用一樣的方法，也能夠將 NodeList 對象轉換爲數組。來看下面的例子：

//在IE8及以前版本中無效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

除IE8及更早版本以外，這行代碼能在任何瀏覽器中運行。因爲IE8及更早版本將 NodeList 實現爲一個COM對象，而咱們不能像使用JScript對象那樣使用這種對象，所以上面的代碼會致使錯誤。要想在IE中將 NodeList 轉換爲數組，必須手動枚舉全部成員。下列代碼在全部瀏覽器中均可以運行：

function convertToArray(nodes){
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes, 0); //針對非IE瀏覽器
    } catch (ex) {
        array = new Array();
        for (var i=0, len=nodes.length; i < len; i++){
            array.push(nodes[i]);
        }
    }
    return array;
}

這個 convertToArray() 函數首先嚐試了建立數組的最簡單方式。若是致使了錯誤（說明是在IE8及更早版本中），則經過 try-catch 塊來捕獲錯誤，而後手動建立數組。這是另外一種檢測怪癖的形式。

相關連接DOM節點分析Web前端精髓