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; 亲自试一试 »

实例说明:

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

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

实例

更改节点列表中所有 <p> 元素的颜色:

var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
} 亲自试一试 »

---

HTMLCollection 与 NodeList 的区别

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

NodeList 是文档节点的集合。

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

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

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

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

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

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

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

节点列表不是数组！

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

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

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