nodelist是節點列表的意思,是JavaScript中的一個對象,是一種類別數組對象,用於保存一組有序的節點;nodelist對象類似HTMLCollection對象,並且該對像中的元素可以通過索引來存取。
本文操作環境:Windows10系統、nodejs 12.19.0版、Dell G3電腦。
NodeList是JavaScript中的一個對象,是一種類別數組對象,用於保存一組有序的節點
NodeList 對象
NodeList 物件是一個從文件中取得的節點清單(集合) 。
NodeList 物件類似 HTMLCollection 物件。
一些舊版瀏覽器中的方法(如:getElementsByClassName())傳回的是 NodeList 對象,而不是 HTMLCollection 物件。
所有瀏覽器的 childNodes 屬性傳回的是 NodeList 物件。
大部分瀏覽器的 querySelectorAll() 傳回 NodeList 物件。
NodeList 中的元素可以透過索引(以 0 為起始位置)來存取。
節點清單可保持其自身的更新。如果節點清單或 XML 文件中的某個元素被刪除或新增,清單也會自動更新。
注意:在一個節點清單中,節點被傳回的順序與它們在 XML 文件中被規定的順序相同。
NodeList 物件屬性
length 傳回節點清單中的節點數。
NodeList 物件方法
item()傳回節點清單中指定索引號碼的節點。
範例如下:
實例1:
var parent = document.getElementById('parent'); parent.childNodes.length // 2 parent.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);// 3 console.log(myNodeList.item(1));//<li>two</li>
在上面程式碼中,透過for迴圈遍歷了myNodeList的數字索引部分,傳回了3個索引對應的成員,並且正確回傳了length屬性為3 。
透過item()方法存取了myNodeList實例物件的第二個成員。由於數字索引從零開始計數,所以取出第二個成員,要使用數字索引1。
所有類似數組的對象,都可以使用方括號運算子取出成員,所以一般情況下,都是使用NodeList[index]方法,而不使用item方法。
推薦學習:《nodejs影片教學》
以上是nodelist是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!