nodelist的概念是什么

這篇文章主要介紹“nodelist的概念是什么”，在日常操作中，相信很多人在nodelist的概念是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”nodelist的概念是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

nodelist是節(jié)點(diǎn)列表的意思，是JavaScript中的一個(gè)對(duì)象，是一種類(lèi)數(shù)組對(duì)象，用于保存一組有序的節(jié)點(diǎn)；nodelist對(duì)象類(lèi)似HTMLCollection對(duì)象，并且該對(duì)象中的元素可以通過(guò)索引來(lái)訪問(wèn)。

本文操作環(huán)境：Windows10系統(tǒng)、nodejs 12.19.0版、Dell G3電腦。

nodelist是什么意思

NodeList是JavaScript中的一個(gè)對(duì)象，是一種類(lèi)數(shù)組對(duì)象，用于保存一組有序的節(jié)點(diǎn)

NodeList 對(duì)象

NodeList 對(duì)象是一個(gè)從文檔中獲取的節(jié)點(diǎn)列表 (集合) 。

NodeList 對(duì)象類(lèi)似 HTMLCollection 對(duì)象。

一些舊版本瀏覽器中的方法(如：getElementsByClassName())返回的是 NodeList 對(duì)象，而不是 HTMLCollection 對(duì)象。

所有瀏覽器的 childNodes 屬性返回的是 NodeList 對(duì)象。

大部分瀏覽器的 querySelectorAll() 返回 NodeList 對(duì)象。

NodeList 中的元素可以通過(guò)索引(以 0 為起始位置)來(lái)訪問(wèn)。

節(jié)點(diǎn)列表可保持其自身的更新。如果節(jié)點(diǎn)列表或 XML 文檔中的某個(gè)元素被刪除或添加，列表也會(huì)被自動(dòng)更新。

注意：在一個(gè)節(jié)點(diǎn)列表中，節(jié)點(diǎn)被返回的順序與它們?cè)?XML 文檔中被規(guī)定的順序相同。

NodeList 對(duì)象屬性

length 返回節(jié)點(diǎn)列表中的節(jié)點(diǎn)數(shù)量。

NodeList 對(duì)象方法

item()返回節(jié)點(diǎn)列表中指定索引號(hào)的節(jié)點(diǎn)。

示例如下：

實(shí)例1：

var parent = document.getElementById('parent');
parent.childNodes.length // 2
parent.appendChild(document.createElement('div'));
parent.childNodes.length // 3

NodeList實(shí)例對(duì)象可能是動(dòng)態(tài)集合，也可能是靜態(tài)集合。所謂動(dòng)態(tài)集合就是一個(gè)活的集合，DOM樹(shù)刪除或新增一個(gè)相關(guān)節(jié)點(diǎn)，都會(huì)立刻反映在NodeList接口之中。

上面代碼中，parent.childNodes返回的是一個(gè)NodeList實(shí)例對(duì)象。當(dāng)parent節(jié)點(diǎn)新增一個(gè)子節(jié)點(diǎn)以后，該對(duì)象的成員個(gè)數(shù)就增加了1。Node.childNodes返回的是一個(gè)動(dòng)態(tài)集合。

document.querySelectorAll方法返回的是一個(gè)靜態(tài)集合。DOM內(nèi)部的變化，并不會(huì)實(shí)時(shí)反映在該方法的返回結(jié)果之中。

NodeList接口實(shí)例對(duì)象提供length屬性和數(shù)字索引，因此可以像數(shù)組那樣，使用數(shù)字索引取出每個(gè)節(jié)點(diǎn)，但是它本身并不是數(shù)組，不能使用pop或push之類(lèi)數(shù)組特有的方法。 [

實(shí)例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>

在上面代碼中，通過(guò)for循環(huán)遍歷了myNodeList的數(shù)字索引部分，返回了3個(gè)索引對(duì)應(yīng)的成員，并且正確返回了length屬性為3。

通過(guò)item()方法訪問(wèn)了myNodeList實(shí)例對(duì)象的第二個(gè)成員。由于數(shù)字索引從零開(kāi)始計(jì)數(shù)，所以取出第二個(gè)成員，要使用數(shù)字索引1。

所有類(lèi)似數(shù)組的對(duì)象，都可以使用方括號(hào)運(yùn)算符取出成員，所以一般情況下，都是使用NodeList[index]方法，而不使用item方法。

到此，關(guān)于“nodelist的概念是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！