JavaScript HTML DOM Node Lists
HTML DOM NodeList 物件
一個 NodeList 物件是從文件中提取的節點列表（集合）。
一個 NodeList 物件幾乎與 HTMLCollection 物件相同。
一些（較舊的）瀏覽器會將 getElementsByClassName() 等方法返回的 HTMLCollection 物件替換為 NodeList 物件。
所有瀏覽器都會為 childNodes 屬性返回 NodeList 物件。
大多數瀏覽器會為 querySelectorAll() 方法返回 NodeList 物件。
以下程式碼選擇文件中的所有 <p> 節點
示例
const myNodeList = document.querySelectorAll("p");
NodeList 中的元素可以透過索引號進行訪問。
要訪問第二個 <p> 節點，您可以這樣寫：
myNodeList[1]
自己動手試一試 »
注意：索引從 0 開始。
HTML DOM Node List 長度
length 屬性定義了節點列表中節點的數量。
當您想遍歷節點列表中的節點時，length 屬性非常有用。
示例
更改節點列表中所有 <p> 元素的顏色
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
自己動手試一試 »
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 並透過索引引用其節點。
但是，您不能在 NodeList 上使用 Array 方法，如 push()、pop() 或 join()。
