JavaScript HTML DOM Node Lists
HTML DOM NodeList 对象
一个 NodeList 对象是从文档中提取的节点列表（集合）。
一个 NodeList 对象几乎与 HTMLCollection 对象相同。
一些（较旧的）浏览器会将 getElementsByClassName() 等方法返回的 HTMLCollection 对象替换为 NodeList 对象。
所有浏览器都会为 childNodes 属性返回 NodeList 对象。
大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。
以下代码选择文档中的所有 <p> 节点
示例
const myNodeList = document.querySelectorAll("p");
NodeList 中的元素可以通过索引号进行访问。
要访问第二个 <p> 节点，您可以这样写：
myNodeList[1]
自己动手试一试 »
注意：索引从 0 开始。
HTML DOM Node List 长度
length 属性定义了节点列表中节点的数量。
当您想遍历节点列表中的节点时，length 属性非常有用。
示例
更改节点列表中所有 <p> 元素的颜色
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
自己动手试一试 »
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 并通过索引引用其节点。
但是，您不能在 NodeList 上使用 Array 方法，如 push()、pop() 或 join()。
