HTML DOM NodeList 参考手册

NodeList

NodeList 是节点对象的类似数组的集合（列表）。

NodeList 中的节点可以通过索引访问（从 0 开始）。

length 属性返回 NodeList 中的节点数。

NodeList vs. HTMLCollection

NodeList 与 HTMLCollection 几乎相同。

请参阅页面下方的说明。

谁返回 NodeList？

childNodes 属性

querySelectorAll() 方法

getElementsByName() 方法

属性和方法

可以在 NodeList 上使用以下属性和方法：

名称 描述
entries() 从列表中返回带有键/值对的迭代器。
forEach() 为列表中的每个节点执行回调函数。
item() 返回指定索引处的节点。
keys() 使用列表中的键返回迭代器。
length 返回 NodeList 中的节点数。
values() 使用列表中的值返回迭代器。

实例

选择文档中的所有 <p> 节点：

const myNodeList = document.querySelectorAll("p");

NodeList 中的元素可以通过索引号访问。

如需访问第二个 <p> 节点，您可以写：

myNodeList[1]

亲自试一试

注意：索引从 0 开始。

HTML DOM Node List Length

length 属性定义节点列表中的节点数：

例子 1

myNodelist.length

亲自试一试

当您想要遍历节点列表中的节点时，length 属性很有用：

例子 2

更改节点列表中所有 <p> 元素的颜色：

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

亲自试一试

不是数组

NodeList 不是数组！

NodeList 可能看起来像一个数组，但事实并非如此。

您可以遍历 NodeList 并使用索引引用其节点。

但是您不能在 NodeList 上使用 Array 方法，如 push()、pop() 或 join()。

HTMLCollection 与 NodeList 的区别

NodeList 与 HTMLcollection 非常相似。

两者都是从文档中提取的节点（元素）组成的类似数组的集合（列表）。可以通过索引号访问节点。索引从 0 开始。

两者都有 length 属性，它返回列表（集合）中元素的数量。

HTMLCollection 是文档元素的集合。

NodeList 是文档节点（元素节点、属性节点和文本节点）的集合。

HTMLCollection 项目可以通过它们的名称、id 或索引号来访问。

NodeList 项只能通过它们的索引号访问。

HTMLCollection 始终是一种实时集合。例如：如果将 <li> 元素添加到 DOM 中的列表，则 HTMLCollection 中的列表也会发生变化。

NodeList 通常是一种静态集合。例如：如果将 <li> 元素添加到 DOM 中的列表，则 NodeList 中的列表不会改变。

getElementsByClassName() 和 getElementsByTagName() 方法返回实时的 HTMLCollection。

querySelectorAll() 方法返回静态 NodeList。

childNodes 属性返回实时的 NodeList。

实时节点列表

在某些情况下，NodeList 是实时的：DOM 中的更改会更新 NodeList。

childNodes 方法返回实时的 NodeList。