NodeList
NodeList 物件是 節點 的集合，通常由 Node.childNodes 等屬性和 document.querySelectorAll() 等方法返回。
這個介面曾是 建立不可修改列表的嘗試，並且至今仍然被支援，以免破壞現有程式碼。現代 API 使用基於 JavaScript 陣列 的型別來表示列表結構，從而提供了許多陣列方法，同時對其使用施加了額外的語義（例如，使其項只讀）。
這些歷史原因並不意味著開發者應該避免使用 NodeList。你不會自己建立 NodeList 物件，而是從 Document.querySelectorAll() 等 API 獲取它們，這些 API 並未被棄用。但是，要注意它與真實陣列的語義差異。
雖然 NodeList 不是 Array，但可以使用 forEach() 迭代它。也可以使用 Array.from() 將其轉換為真實的 Array。
即時 NodeLists 與靜態 NodeLists
儘管它們都被視為 NodeList 物件，但 NodeList 有 2 種變體：即時 (live) 和 靜態 (static)。
在大多數情況下，NodeList 是即時的，這意味著 DOM 的更改會自動更新集合。
例如，Node.childNodes 是即時
const parent = document.getElementById("parent");
let childNodes = parent.childNodes;
console.log(childNodes.length); // let's assume "2"
parent.appendChild(document.createElement("div"));
console.log(childNodes.length); // outputs "3"
在其他情況下，NodeList 是靜態的，DOM 的任何更改都不會影響集合的內容。無處不在的 document.querySelectorAll() 方法是唯一返回靜態 NodeList 的 API。
在選擇如何迭代 NodeList 中的項以及是否應該快取列表的 length 時，牢記這種區別很有好處。
例項屬性
NodeList.length只讀-
NodeList中的節點數。
例項方法
NodeList.item()-
按索引返回列表中的一項，如果索引超出範圍則返回
null。訪問
nodeList[i]的替代方法（當i超出範圍時，它會返回undefined）。這對於非 JavaScript DOM 實現非常有用。 NodeList.entries()-
返回一個
迭代器，允許程式碼遍歷集合中的所有鍵/值對。（在這種情況下，鍵是從0開始的整數，值為節點。） NodeList.forEach()-
對
NodeList中的每個元素執行一次提供的函式，並將元素作為引數傳遞給函式。 NodeList.keys()-
返回一個
迭代器，允許程式碼遍歷集合中的所有鍵/值對的鍵。（在這種情況下，鍵是從0開始的整數。） NodeList.values()-
返回一個
迭代器，允許程式碼遍歷集合中的所有鍵/值對的值（節點）。
示例
可以使用 for 迴圈來遍歷 NodeList 中的項。
for (let i = 0; i < myNodeList.length; i++) {
let item = myNodeList[i];
}
請勿使用 for...in 來列舉 NodeList 中的項，因為它們還會列舉其 length 和 item 屬性，如果你的指令碼假設只需要處理 element 物件，則會導致錯誤。此外，for...in 不保證按特定順序訪問屬性。
for...of 迴圈可以正確地遍歷 NodeList 物件。
const list = document.querySelectorAll("input[type=checkbox]");
for (const checkbox of list) {
checkbox.checked = true;
}
規範
| 規範 |
|---|
| DOM # interface-nodelist |
瀏覽器相容性
載入中…