nodelist

nodelist

NodeList實例對象是一個類似數組的對象,它的成員是節點對象。Node.childNodes、document.querySelectorAll()返回的都是NodeList實例對象。NodeList 對象代表一個有序的節點列表。

基本介紹

  • 中文名:節點列表
  • 外文名:NodeList
正文,NodeList 對象,NodeList 對象屬性,NodeList 對象方法,實例,

正文

NodeList 對象

節點列表中的節點可以通過其對應的索引數字(從 0 開始計數)進行訪問。
節點列表可保持其自身的更新。如果節點列表或 XML 文檔中的某個元素被刪除或添加,列表也會被自動更新。
注意:在一個節點列表中,節點被返回的順序與它們在 XML 文檔中被規定的順序相同。

NodeList 對象屬性

屬性描述
返回節點列表中的節點數量。

NodeList 對象方法

方法描述
item()
返回節點列表中指定索引號的節點。

實例

實例1:
var parent = document.getElementById('parent');parent.childNodes.length // 2parent.appendChild(document.createElement('div'));parent.childNodes.length // 3
NodeList實例對象可能是動態集合,也可能是靜態集合。所謂動態集合就是一個活的集合,DOM樹刪除或新增一個相關節點,都會立刻反映在NodeList接口之中。
上面代碼中,parent.childNodes返回的是一個NodeList實例對象。當parent節點新增一個子節點以後,該對象的成員個數就增加了1。Node.childNodes返回的是一個動態集合。
document.querySelectorAll方法返回的是一個靜態集合。DOM內部的變化,並不會實時反映在該方法的返回結果之中。
NodeList接口實例對象提供length屬性和數字索引,因此可以像數組那樣,使用數字索引取出每個節點,但是它本身並不是數組,不能使用pop或push之類數組特有的方法。
實例2:
//HTML部分代碼//<ul><li>one</li><li>two</li><li>three</li></ul>//JAVASCRIPT代碼var myNodeList = document.querySelector('ul').childNodes;for(var i=0;i<myNodeList.length;i++){    console.log(myNodeList[i]);}/* <li>one</li><li>two</li><li>three</li>*/console.log(myNodeList.length);// 3console.log(myNodeList.item(1));//<li>two</li>
在上面代碼中,通過for循環遍歷了myNodeList的數字索引部分,返回了3個索引對應的成員,並且正確返回了length屬性為3。
通過item()方法訪問了myNodeList實例對象的第二個成員。由於數字索引從零開始計數,所以取出第二個成員,要使用數字索引1。
所有類似數組的對象,都可以使用方括弧運算符取出成員,所以一般情況下,都是使用NodeList[index]方法,而不使用item方法。

相關詞條

熱門詞條

聯絡我們