DOM 节点列表
Node 列表类似于包含 HTML 元素的数组或 HTML 集合。但是，它与数组或 HTML 集合不同。
当您使用 querySelectorAll（） 方法和 childNodes 属性时，所有现代浏览器都会返回节点列表。
你可以将 NodeList 作为数组遍历，但不能将其他数组方法（如 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 += "All languages are: <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">Total number of fruits are : </div>
<script>
const fruits = document.querySelectorAll('.fruit');
document.getElementById('output').innerHTML += fruits.length;
</script>
</body>
</html>
HTMLCollection 和 NodeList 之间的区别
HTML 集合和节点列表看起来很相似，但它们之间存在细微差别，我们在下表中对此进行了解释。
| 特征 | HTMLCollection | 节点列表 |
|---|---|---|
| 返回方式 | 通常，getElementByClassName（）、getElementByTagName 方法和 children 属性返回 HTML 集合。 | 通常，querySelectorAll（） 方法和 childNodes 属性返回 Node 列表。 |
| 数组方法 | 它支持有限的数组方法。 | 它还支持有限的数组方法，如 forEach（）。 |
| Live 集合 | 某些浏览器支持使用 HTML 集合进行实时收集。 | 如果更新 DOM 元素，它会更新。 |
