JavaScript DOM 节点列表


目录

    显示目录


HTML DOM NodeList 对象

NodeList 对象是从节点中提取的节点列表(集合) 文档。

NodeList 对象与 HTMLCollection 对象几乎相同。

某些(较旧的)浏览器返回 NodeList 对象而不是 HTMLCollection 对于像 getElementsByClassName() 这样的方法。

所有浏览器都会为属性 childNodes 返回 NodeList 对象。

大多数浏览器都会为 querySelectorAll() 方法返回 NodeList 对象。

以下代码选择文档中的所有 <p> 节点:

例子

const myNodeList = document.querySelectorAll("p");

NodeList 中的元素可以通过索引号来访问。

要访问 您可以编写第二个 <p> 节点:

myNodeList[1]

注意:索引从0开始。


HTML DOM 节点列表长度

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>


HTMLCollection 和 NodeList 之间的区别

NodeListHTMLcollection 非常相似。

两者都是从节点(元素)中提取的类似数组的集合(列表) 文档。可以通过索引号来访问节点。索引从 0 开始。

两者都有一个 length 属性,用于返回列表(集合)中的元素数量。

HTMLCollection 是文档元素的集合。

NodeList 是文档节点(元素节点、属性节点和文本节点)的集合。

HTMLCollection 项目可以通过其名称、ID 或索引号进行访问。

NodeList 项只能通过其索引号来访问。

HTMLCollection 始终是一个实时集合。示例:如果将

  • 元素添加到 DOM 中的列表,则 HTMLCollection 中的列表也会更改。

    NodeList 通常是一个静态集合。示例:如果将

  • 元素添加到 DOM 中的列表中,NodeList 中的列表不会改变。

    getElementsByClassName()getElementsByTagName() 方法返回一个实时 HTMLCollection。

    querySelectorAll() 方法返回静态 NodeList。

    childNodes 属性返回一个活动的 NodeList。


    不是数组!

    NodeList 可能看起来像一个数组,但事实并非如此。

    您可以循环遍历 NodeList 并按索引引用其节点。

    但是,您不能在 NodeList 上使用像 push()、pop() 或 join() 这样的数组方法。