HTML DOM NodeList
NodeList
NodeList 是一个类似数组的 Node 对象集合 (列表)。
NodeList 中的节点可以通过索引访问 (从 0 开始)。
length 属性 返回 NodeList 中的节点数。
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 NodeList 长度
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。
动态 NodeList
在某些情况下，NodeList 是 动态 的：DOM 中的更改会更新 NodeList。
childNodes 方法返回一个动态 NodeList。
