HTML DOM NodeList（節點列表）
NodeList（節點列表）
NodeList 是 Node 物件的類陣列集合（列表）。
NodeList 中的節點可以透過索引（從 0 開始）訪問。
length 屬性 返回 NodeList 中節點的數量。
NodeList 與 HTMLCollection
NodeList 與 HTMLCollection 幾乎相同。
請參閱下面的描述。
屬性和方法
以下屬性和方法可用於 NodeList
| 名稱 | 描述 |
|---|---|
| entries() | 返回一個包含列表中鍵/值對的迭代器 |
| forEach() | 對列表中每個節點執行回撥函式 |
| item() | 返回指定索引處的節點 |
| keys() | 返回一個包含列表中鍵的迭代器 |
| length | 返回 NodeList 中節點的數量 |
| values() | 返回一個包含列表中值的迭代器 |
示例
選擇文件中所有 <p> 節點
const myNodeList = document.querySelectorAll("p");
NodeList 中的元素可以透過索引號訪問。
要訪問第二個 <p> 節點，您可以這樣寫：
myNodeList[1]
自己動手試一試 »
注意：索引從 0 開始。
HTML DOM 節點列表長度
length 屬性定義了節點列表中節點的數量。
當您想遍歷節點列表中的節點時，length 屬性非常有用。
示例
更改節點列表中所有 <p> 元素的顏色
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
自己動手試一試 »
不是陣列
NodeList 不是一個數組！
NodeList 可能看起來像一個數組，但它不是。
您可以透過迴圈遍歷 NodeList 並透過索引引用其節點。
但您不能在 NodeList 上使用 push()、pop() 或 join() 等陣列方法。
HTMLCollection 和 NodeList 的區別
NodeList 和 HTMLCollection 非常相似。
兩者都是從文件中提取的節點（元素）的類陣列集合（列表）。節點可以透過索引號訪問。索引從 0 開始。
兩者都有一個 length 屬性，返回列表中（集合中）元素的數量。
HTMLCollection 是 文件元素 的集合。
NodeList 是 文件節點 的集合（元素節點、屬性節點和文字節點）。
HTMLCollection 的專案可以透過它們的名稱、ID 或索引號訪問。
NodeList 的專案只能透過它們的索引號訪問。
HTMLCollection 始終是 即時 集合。示例：如果您在 DOM 中向列表中新增一個 <li> 元素，HTMLCollection 中的列表也會隨之更改。
NodeList 通常是 靜態 集合。示例：如果您在 DOM 中向列表中新增一個 <li> 元素，NodeList 中的列表將不會更改。
getElementsByClassName() 和 getElementsByTagName() 方法返回一個即時的 HTMLCollection。
querySelectorAll() 方法返回一個靜態的 NodeList。
childNodes 屬性返回一個即時的 NodeList。
即時 NodeList
在某些情況下，NodeList 是 即時 的：DOM 中的更改會更新 NodeList。
childNodes 方法返回一個即時的 NodeList。
