DOM NodeList

NodeList 对象是一个 DOM 节点对象的集合。NodeList 的作用几乎与 HTMLCollection 对象相同。

某些（较旧的）浏览器会返回 NodeList 对象而不是 HTMLCollection 之类的方法。

所有浏览器都为节点对象 childNodes 属性返回一个 NodeList 对象。

大多数浏览器都会为 querySelectorAll() 方法返回一个 NodeList 对象。

以下代码选择文档中的所有 <p> 节点：

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

NodeList 中的元素可以通过索引号访问，索引号从 0 开始。要访问第二个 <p> 节点，您可以编写：

myNodeList[1];

NodeList 遍历

NodeList 的 length 属性返回列表中元素的数量。当您想要遍历 NodeList 对象中的元素时会用到 length 属性。

下面例子更改所有 <p> 元素的文本颜色：

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

和 HTMLCollection 对象一样，NodeList 同样有 item() 方法获取元素。

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

HTMLCollection 和 NodeList 之间的区别

HTMLCollection 是 HTML 元素的集合， NodeList 是文档节点的集合。

HTMLCollection 和 NodeList 非常相似， HTMLCollection 对象和 NodeList 对象都是一个类似数组的对象列表（集合）。

两者都有一个 length 属性，用于定义列表（集合）中的项目数。

两者都可以像数组一样使用索引来访问每个元素。

HTMLCollection 项可以通过其名称、ID 或索引号进行访问， NodeList 只能通过索引号访问。

只有 NodeList 对象可以包含属性节点和文本节点。