JavaScript HTML DOM 节点列表
HTML DOM 节点列表对象
一个 NodeList 对象是从文档中提取的节点列表（集合）。
一个 NodeList 对象几乎与 HTMLCollection 对象相同。
一些（较旧的）浏览器返回 NodeList 对象而不是 HTMLCollection 用于诸如 getElementsByClassName() 的方法。
所有浏览器都为属性 childNodes 返回 NodeList 对象。
大多数浏览器为方法 querySelectorAll() 返回 NodeList 对象。
以下代码选择文档中的所有 <p> 节点
示例
const myNodeList = document.querySelectorAll("p");
NodeList 中的元素可以通过索引号访问。
要访问第二个 <p> 节点，您可以写
myNodeList[1]
试试看 »
注意: 索引从 0 开始。
HTML DOM 节点列表长度
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 是 文档节点（元素节点、属性节点和文本节点）的集合。
可以通过名称、ID 或索引号访问 HTMLCollection 项目。
NodeList 项目只能通过索引号访问。
HTMLCollection 始终是 实时 集合。例如：如果在 DOM 中向列表添加一个 <li> 元素，则 HTMLCollection 中的列表也会发生变化。
NodeList 通常是 静态 集合。例如：如果在 DOM 中向列表添加一个 <li> 元素，则 NodeList 中的列表不会发生变化。
getElementsByClassName() 和 getElementsByTagName() 方法返回实时 HTMLCollection。
querySelectorAll() 方法返回静态 NodeList。
childNodes 属性返回实时 NodeList。
不是数组！
NodeList 看起来像数组，但它不是数组。
您可以遍历 NodeList 并通过索引引用其节点。
但是，您不能在 NodeList 上使用 push()、pop() 或 join() 等数组方法。
