日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 综合教程 >内容正文

综合教程

nodelist是什么意思(中的nodeList理解)

發布時間:2023/12/15 综合教程 28 生活家
生活随笔 收集整理的這篇文章主要介紹了 nodelist是什么意思(中的nodeList理解) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文操作環境:Windows10系統、nodejs 12.19.0版、Dell G3電腦。

nodelist是什么意思

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是什么意思的詳細內容,更多請關注風君子博客其它相關文章!

總結

以上是生活随笔為你收集整理的nodelist是什么意思(中的nodeList理解)的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。