目录

JavaScript HTML DOM 节点列表


HTML DOM NodeList 对象

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

NodeList对象几乎与一个相同HTMLCollection目的。

某些(较旧的)浏览器返回 NodeList 对象而不是 HTMLCollection 等方法getElementsByClassName()

所有浏览器都返回该属性的 NodeList 对象childNodes

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

以下代码选择全部<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";
}
亲自试一试 »


HTMLCollection 和 NodeList 之间的区别

节点列表HTML集合是非常一样的事情。

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

两者都有一个长度返回列表(集合)中元素数量的属性。

HTMLCollection 是一个集合文档元素

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

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

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

HTMLCollection 始终是居住收藏。示例:如果将 <li> 元素添加到 DOM 中的列表,则 HTMLCollection 中的列表也会更改。

NodeList 通常是静止的收藏。示例:如果将 <li> 元素添加到 DOM 中的列表中,NodeList 中的列表不会改变。

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

这个querySelectorAll()方法返回一个静态 NodeList。

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


不是数组!

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

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

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