JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
HTML DOM NodeList 对象
NodeList 对象是从文档中提取的节点列表（集合）。
NodeList 对象与 HTMLCollection 对象几乎相同。
如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。
所有浏览器都会为 childNodes 属性返回 NodeList 对象。
大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。
下面的代码选取文档中的所有 <p> 节点：
示例代码：
var myNodeList = document.querySelectorAll("p");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML DOM</h1>
<p>Hello World!</p>
<p>Hello China!</p>
<p id="demo"></p>
<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML =
"第二段的 innerHTML 是：" +
myNodelist[1].innerHTML;
</script>
</body>
</html>
运行结果：
Javascript HTML DOM Hello World! Hello China! 第二段的 innerHTML 是：Hello China!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
NodeList 中的元素可通过索引号进行访问。
如需访问第二个 <p> 节点，您可以这样写：
y = myNodeList[1];
注释：索引从 0 开始。
HTML DOM Node List 长度
length 属性定义节点列表中的节点数：
示例代码：
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML DOM</h1>
<p>Hellow World!</p>
<p>Hello China!</p>
<p id="demo"></p>
<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML =
"此文档包含 " + myNodelist.length + " 段文字。";
</script>
</body>
</html>
运行结果：
Javascript HTML DOM Hellow World! Hello China! 此文档包含 3 段文字。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子解释：
- 创建所有 <p> 元素的列表
- 显示该列表的长度
length 属性在您希望遍历节点列表中的节点时很有用：
示例代码：
改变节点列表中所有 <p> 元素的背景色：
var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = "red";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML DOM</h1>
<p>Hello World!</p>
<p>Hello China!</p>
<p>单击按钮可更改所有 p 元素的颜色。</p>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HTMLCollection 与 NodeList 的区别
HTMLCollection（前一章）是 HTML 元素的集合。
NodeList 是文档节点的集合。
NodeList 和 HTML 集合几乎完全相同。
HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。
它们都有定义列表（集合）中项目数的 length 属性。
它们都可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目。
访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。
访问 NodeList 项目，只能通过它们的索引号。
只有 NodeList 对象能包含属性节点和文本节点。
节点列表不是数组！
节点数组看起来像数组，但并不是。
您能够遍历节点列表并像数组那样引用其节点。
不过，您无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()。
