JavaScript HTML DOM 节点列表

HTML DOM NodeList 对象

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

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

如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。

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

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

下面的代码选取文档中的所有 <p> 节点：

实例

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

亲自试一试

NodeList 中的元素可通过索引号进行访问。

如需访问第二个 <p> 节点，您可以这样写：

y = myNodeList[1];

注释：索引从 0 开始。

HTML DOM Node List 长度

length 属性定义节点列表中的节点数：

实例

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

亲自试一试

例子解释：

  • 创建所有 <p> 元素的列表
  • 显示该列表的长度

length 属性在您希望遍历节点列表中的节点时很有用：

实例

改变节点列表中所有 <p> 元素的背景色：

var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

亲自试一试

HTMLCollection 与 NodeList 的区别

HTMLCollection（前一章）是 HTML 元素的集合。

NodeList 是文档节点的集合。

NodeList 和 HTML 集合几乎完全相同。

HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。

它们都有定义列表（集合）中项目数的 length 属性。

它们都可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目。

访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。

访问 NodeList 项目，只能通过它们的索引号。

只有 NodeList 对象能包含属性节点和文本节点。

节点列表不是数组！

节点数组看起来像数组，但并不是。

您能够遍历节点列表并像数组那样引用其节点。

不过，您无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()。

VUE