NodeList

尽管它们都被认为是 NodeList 对象，但 NodeList 有两种类型：动态 和 静态。

在某些情况下，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。

在您选择如何迭代 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 属性，如果您的脚本假设它只需要处理 元素 对象，则会导致错误。此外，for...in 不保证以任何特定顺序访问属性。

for...of 循环正确地循环遍历 NodeList 对象

const list = document.querySelectorAll("input[type=checkbox]");
for (const checkbox of list) {
  checkbox.checked = true;
}

浏览器还支持迭代器方法（forEach()）以及 entries()、values() 和 keys()。