HTML DOM NodeList
NodeList
NodeList 节点列表是一个类似数组的节点对象集合(列表)。
可以通过索引(从 0 开始)访问节点列表中的节点。
length 属性 返回节点列表中的节点数。
NodeList 与 HTMLCollection
NodeList 几乎与 HTMLCollection 相同。
请参阅以下说明。
属性和方法
NodeList 可以使用以下属性和方法:
| 名称 | 描述 |
|---|---|
| entries() | 返回一个包含列表中键值对的迭代器 |
| forEach() | 对列表中的每个节点执行回调函数 |
| item() | 返回指定索引处的节点 |
| keys() | 返回一个包含列表中所有键的迭代器 |
| length | 返回 NodeList 中的节点数 |
| values() | 返回一个包含列表中所有值的迭代器 |
示例
选择文档中的所有<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";
}亲自试一试 »不是数组
NodeList 不是数组!
NodeList 看起来像数组，但它不是。
你可以遍历 NodeList 并使用索引访问其节点。
但是你不能对 NodeList 使用数组方法，例如 push()、pop() 或 join()。
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 对象。
实时节点列表
在某些情况下，节点列表是实时的:DOM 的变化会更新节点列表。
childNodes 方法返回一个实时节点列表。
