上一节:

  JavaScript HTML DOM 节点列表

  • HTML DOM NodeList对象

    NodeList对象是从文档中提取的节点的列表（集合）。NodeList目的是几乎相同的HTMLCollection对象。一些（较旧的）浏览器为类似的方法返回NodeList对象而不是HTML Collection getElementsByClassName()。所有浏览器都返回该属性的NodeList对象childNodes。 大多数浏览器返回NodeList对象querySelectorAll()方法。以下代码选择<p>文档中的所有节点： 
    var myNodeList = document.querySelectorAll("p");
    可以通过索引号访问NodeList中的元素。要访问第二个<p>节点，您可以编写： 
    y = myNodeList[1];
    尝试一下
    注意：索引从0开始。

  • HTML DOM NodeList长度

    length属性定义NodeList中的节点数： 
    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.backgroundColor = "red";
}
    尝试一下

  • HTML Collection和NodeList之间的区别

    一个HTML Collection（上一章）是HTML元素的集合。一个NodeList是文档节点的集合。NodeList和HTML Collection是完全相同的。HTML Collection对象和NodeList对象都是类似于数组的对象列表（集合）。两者都有一个length属性，用于定义列表（集合）中的项目数。两者都提供索引（0,1,2,3,4，...）来访问每个项目，如数组。可以通过名称，ID或索引号访问HTML Collection项。NodeList项只能通过其索引号访问。只有NodeList对象可以包含属性节点和文本节点。
    节点列表不是数组！NodeList可能看起来像一个数组，但事实并非如此。您可以遍历节点列表并像数组一样引用其节点。但是，您不能在节点列表上使用数组方法，如valueOf()，push()，pop()或join()。
上一节: