节点列表类似于包含 HTML 元素的数组或 HTML 集合。然而，它并不完全等同于数组或 HTML 集合。
所有现代浏览器在你使用 querySelectorAll() 方法和 childNodes 属性时都会返回节点列表。
你可以像遍历数组那样遍历节点列表，但不能使用如 map()、filter() 等其他数组方法与节点列表一起使用。
示例
使用 forEach() 方法遍历节点列表元素
在下面的程序中，我们定义了四个包含不同语言的 <p> 元素。
然后，我们使用 querySelectorAll() 方法获取具有类名为 'lang' 的所有元素到节点列表中。接着，我们使用 forEach() 方法遍历节点列表，并打印出每个元素的 HTML。
<DOCTYPE html>
<html>
<body>
<p class="lang"> English </p>
<p class="lang"> German </p>
<p class="lang"> Arabic </p>
<p class="lang"> Hindi </p> <br>
<div id="output"> </div>
<script>
const output = document.getElementById('output');
output.innerHTML += "所有语言是: <br>";
const langs = document.querySelectorAll('.lang');
langs.forEach((language) => {
output.innerHTML += language.innerHTML + '<br>';
})
</script>
</body>
</html>
示例：获取节点列表的长度
在下面的代码中，我们使用了节点列表的 length 属性来计算节点列表中的节点数量。
<DOCTYPE html>
<html>
<body>
<div class="fruit"> Apple </div>
<div class="fruit"> Orange </div>
<div class="fruit"> Banana </div>
<div class="fruit"> Mango </div>
<div id="output">水果总数为: </div>
<script>
const fruits = document.querySelectorAll('.fruit');
document.getElementById('output').innerHTML += fruits.length;
</script>
</body>
</html>
HTMLCollection 与 NodeList 的区别
HTML 集合和节点列表看起来很相似，但它们之间存在细微的区别，如下表所示：
| 特性 |
HTMLCollection |
NodeList |
| 返回方式 |
通常由 getElementByClassName()、getElementByTagName 方法和 children 属性返回 HTML 集合。 |
通常由 querySelectorAll() 方法和 childNodes 属性返回节点列表。 |
| 数组方法 |
支持有限的数组方法。 |
同样支持有限的数组方法，如 forEach()。 |
| 实时集合 |
有些浏览器支持 HTML 集合的实时集合。 |
如果你更新 DOM 元素，它也会更新。 |