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) catch (ex) 
}return array;
}

這個 converttoarray() 函式首先嘗試了建立陣列的最簡單方式。如果導致了錯誤（說明是在ie8及更早版本中），則通過 try-catch 塊來捕獲錯誤，然後手動建立陣列。這是另一種檢測怪癖的形式。

相關鏈結dom節點分析web前端精髓

DOM節點分析

關於DOM節點

DOM 訪問節點

DOM基礎節點

DOM節點分析

關於DOM節點

DOM 訪問節點

DOM基礎 節點

相關推薦

DOM基礎節點