NodeList
对象是从节点中提取的节点列表(集合) 文档。
NodeList
对象与 HTMLCollection
对象几乎相同。
某些(较旧的)浏览器返回 NodeList 对象而不是 HTMLCollection 对于像 getElementsByClassName()
这样的方法。
所有浏览器都会为属性 childNodes
返回 NodeList 对象。
大多数浏览器都会为 querySelectorAll()
方法返回 NodeList 对象。
以下代码选择文档中的所有 <p>
节点:
const myNodeList = document.querySelectorAll("p");
NodeList 中的元素可以通过索引号来访问。
要访问 您可以编写第二个 <p> 节点:
myNodeList[1]
注意:索引从0开始。
length
属性定义节点列表中的节点数量:
myNodelist.length
当您想要循环遍历节点中的节点时,length
属性非常有用 列表:
更改节点中所有 <p> 元素的颜色 列表:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p>Click the button to change the color of all p elements.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
}
</script>
</body>
</html>
NodeList 和 HTMLcollection 非常相似。
两者都是从节点(元素)中提取的类似数组的集合(列表) 文档。可以通过索引号来访问节点。索引从 0 开始。
两者都有一个 length 属性,用于返回列表(集合)中的元素数量。
HTMLCollection 是文档元素的集合。
NodeList 是文档节点(元素节点、属性节点和文本节点)的集合。
HTMLCollection 项目可以通过其名称、ID 或索引号进行访问。
NodeList 项只能通过其索引号来访问。
HTMLCollection 始终是一个实时集合。示例:如果将
NodeList 通常是一个静态集合。示例:如果将
getElementsByClassName()
和 getElementsByTagName()
方法返回一个实时 HTMLCollection。
querySelectorAll()
方法返回静态 NodeList。
childNodes
属性返回一个活动的 NodeList。
NodeList 可能看起来像一个数组,但事实并非如此。
您可以循环遍历 NodeList 并按索引引用其节点。
但是,您不能在 NodeList 上使用像 push()、pop() 或 join() 这样的数组方法。