HTML DOM NodeList 參考手冊

NodeList

NodeList 是節點對象的類似數組的集合（列表）。

NodeList 中的節點可以通過索引訪問（從 0 開始）。

length 屬性返回 NodeList 中的節點數。

NodeList vs. HTMLCollection

NodeList 與 HTMLCollection 幾乎相同。

請參閱頁面下方的說明。

誰返回 NodeList？

childNodes 屬性

querySelectorAll() 方法

getElementsByName() 方法

屬性和方法

可以在 NodeList 上使用以下屬性和方法：

名稱 描述
entries() 從列表中返回帶有鍵/值對的迭代器。
forEach() 為列表中的每個節點執行回調函數。
item() 返回指定索引處的節點。
keys() 使用列表中的鍵返回迭代器。
length 返回 NodeList 中的節點數。
values() 使用列表中的值返回迭代器。

實例

選擇文檔中的所有 <p> 節點：

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

NodeList 中的元素可以通過索引號訪問。

如需訪問第二個 <p> 節點，您可以寫：

myNodeList[1]

親自試一試

注意：索引從 0 開始。

HTML DOM Node List Length

length 屬性定義節點列表中的節點數：

例子 1

myNodelist.length

親自試一試

當您想要遍歷節點列表中的節點時，length 屬性很有用：

例子 2

更改節點列表中所有 <p> 元素的顏色：

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

親自試一試

不是數組

NodeList 不是數組！

NodeList 可能看起來像一個數組，但事實并非如此。

您可以遍歷 NodeList 并使用索引引用其節點。

但是您不能在 NodeList 上使用 Array 方法，如 push()、pop() 或 join()。

HTMLCollection 與 NodeList 的區別

NodeList 與 HTMLcollection 非常相似。

兩者都是從文檔中提取的節點（元素）組成的類似數組的集合（列表）。可以通過索引號訪問節點。索引從 0 開始。

兩者都有 length 屬性，它返回列表（集合）中元素的數量。

HTMLCollection 是文檔元素的集合。

NodeList 是文檔節點（元素節點、屬性節點和文本節點）的集合。

HTMLCollection 項目可以通過它們的名稱、id 或索引號來訪問。

NodeList 項只能通過它們的索引號訪問。

HTMLCollection 始終是一種實時集合。例如：如果將 <li> 元素添加到 DOM 中的列表，則 HTMLCollection 中的列表也會發生變化。

NodeList 通常是一種靜態集合。例如：如果將 <li> 元素添加到 DOM 中的列表，則 NodeList 中的列表不會改變。

getElementsByClassName() 和 getElementsByTagName() 方法返回實時的 HTMLCollection。

querySelectorAll() 方法返回靜態 NodeList。

childNodes 屬性返回實時的 NodeList。

實時節點列表

在某些情況下，NodeList 是實時的：DOM 中的更改會更新 NodeList。

childNodes 方法返回實時的 NodeList。