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。
