HTML DOM NodeList

节点列表

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

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

长度属性返回 NodeList 中的节点数。

NodeList 与 HTMLCollection

NodeList 几乎与HTML集合。

请参阅下面的描述。

谁返回 NodeList？

childNodes() 方法

querySelectorAll() 方法

getElementsByName() 方法

属性和方法

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

Name	Description
entries()	Returns an Iterator with the key/value pairs from the list
forEach()	Executes a callback function for each node in the list
item()	Returns the node at a specified index
keys()	Returns an Iterator with the keys from the list
length	Returns the number of nodes in a NodeList
values()	Returns an Iterator with the values from the list

示例

全选<p>文档中的节点：

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

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

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

myNodeList[1]

亲自试一试 »

笔记：索引从 0 开始。

HTML DOM 节点列表长度

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

示例

myNodelist.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 之间的区别

节点列表和HTML集合是非常一样的事情。

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

两者都有一个长度返回列表（集合）中元素数量的属性。

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。