JavaScript - DOM 节点列表

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 元素，它会更新。

打印本页

JavaScript - DOM 节点列表

DOM 节点列表

使用 forEach（） 方法遍历节点列表元素

示例：获取节点列表的长度

HTMLCollection 和 NodeList 之间的区别

使用 forEach（）方法遍历节点列表元素