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 的区别

NodeListHTMLcollection 非常相似。

两者都是从文档中提取的节点(元素)组成的类似数组的集合(列表)。可以通过索引号访问节点。索引从 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。