NodeList 對象

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

NodeList 對象類似 HTMLCollection 對象。

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

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

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

以下代碼選取了文檔中所有的 <p> 節(jié)點(diǎn)：

實(shí)例

var myNodeList = document.querySelectorAll("p");

NodeList 中的元素可以通過索引(以 0 為起始位置)來訪問。

訪問第二個(gè) <p> 元素可以是以下代碼:

y = myNodeList[1];

運(yùn)行代碼 ?

NodeList 對象 length 屬性

NodeList 對象 length 屬性定義了節(jié)點(diǎn)列表中元素的數(shù)量。

實(shí)例

var myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = myNodelist.length;

運(yùn)行代碼 ?

實(shí)例解析

獲取 <p> 元素的集合：

var myNodelist = document.querySelectorAll("p");

顯示節(jié)點(diǎn)列表的元素個(gè)數(shù)：

document.getElementById("demo").innerHTML = myNodelist.length;

length 屬性常用于遍歷節(jié)點(diǎn)列表。

實(shí)例

修改節(jié)點(diǎn)列表中所有 <p> 元素的背景顏色:

var myNodelist = document.querySelectorAll("p"); var i; for (i = 0; i < myNodelist.length; i++) { myNodelist[i].style.backgroundColor = "red"; }

運(yùn)行代碼 ?

HTMLCollection 與 NodeList 的區(qū)別

HTMLCollection 是 HTML 元素的集合。

NodeList 是一個(gè)文檔節(jié)點(diǎn)的集合。

NodeList 與 HTMLCollection 有很多類似的地方。

NodeList 與 HTMLCollection 都與數(shù)組對象有點(diǎn)類似，可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素。

NodeList 與 HTMLCollection 都有 length 屬性。

HTMLCollection 元素可以通過 name，id 或索引來獲取。

NodeList 只能通過索引來獲取。

只有 NodeList 對象有包含屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)。

節(jié)點(diǎn)列表不是一個(gè)數(shù)組！

節(jié)點(diǎn)列表看起來可能是一個(gè)數(shù)組，但其實(shí)不是。

你可以像數(shù)組一樣，使用索引來獲取元素。

節(jié)點(diǎn)列表無法使用數(shù)組的方法： valueOf(), pop(), push(), 或 join() 。

上一篇：HTMLCollection 對象下一篇：JavaScript 對象