JavaScript - DOM NodeList
DOM NodeList
NodeList 类似于包含 HTML 元素的数组或 HTMLCollection。然而，它与数组或 HTMLCollection 并不相同。
所有现代浏览器在使用 querySelectorAll() 方法和 childNodes 属性时都会返回 node list。你可以将 NodeList 像数组一样遍历，但无法对 node list 使用其他数组方法，如 map()、filter() 等。
下图清楚地解释了 JavaScript NodeList 接口。如你所见，HTML 代码片段包含所有类型的节点：
JavaScript DOM NodeList 方法
以下是 JavaScript NodeList 提供的方法列表 −
| Sr.No | Method & Description |
|---|---|
| 1 | entries()
此方法检索一个迭代器，允许我们遍历对象中的所有键/值对。 |
| 2 | forEach()
此方法按照插入顺序为列表中的每个值对调用一次参数中指定的回调函数。 |
| 3 | item()
此方法根据参数中的索引从 NodeList 中检索一个节点。 |
| 4 | keys()
此方法检索一个迭代器，允许我们遍历 NodeList 中包含的所有键。 |
JavaScript DOM NodeList 属性
以下是 JavaScript NodeList 提供的属性列表 −
| 序号 | 属性 & 描述 |
|---|---|
| 1 | length
该属性返回 NodeList 中的项目数量。 |
示例 1：从 NodeList 中检索特定元素。
以下示例演示了 JavaScript DOM NodeList 的用法 −
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript DOM NodeList</title>
</head>
<body>
<div>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
<p>This is fourth paragraph.</p>
</div>
<script>
let myNodeList = document.querySelectorAll('p');
//你可以通过索引访问节点列表
//访问第三个节点列表
alert("This is third P: " + myNodeList[2].innerHTML);
</script>
</body>
</html>
该程序使用 "querySelectorAll()" 选择所有 "p" 元素作为 NodeList。通过传递索引值 "2"，它会弹出文档中第三个 "p" 元素 −
示例 2：为 NodeList (<div>) 元素添加样式。
在本示例中，我们使用 "getElementsByTagName('div')" 方法选择所有 "<div>" 元素并将其返回为 NodeList。现在，我们可以为这些元素应用样式 −
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript DOM NodeList</title>
<style>
button{
padding: 8px 20px;
margin: 20px 0px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<p>Click the button below to add style to all "div" elements.</p>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<button id="btn">Add style</button>
<script>
document.getElementById('btn').addEventListener("click", ()=>{
//使用 getElementsByTagName() 方法
let myNodeList = document.getElementsByTagName('div');
//使用 length 属性
for(let i = 0; i<myNodeList.length; i++){
myNodeList[i].style.color = 'white';
myNodeList[i].style.padding = "10px";
myNodeList[i].style.margin = "5px";
myNodeList[i].style.border = "1px solid black";
myNodeList[i].style.backgroundColor = "green";
}
});
</script>
</body>
</html>
执行上述程序后，会显示一个按钮。点击后，它会为所有 "div" 元素应用新样式 −
示例 3：使用 forEach() 方法遍历 NodeList 元素。
在本示例中，我们有四个 <p> 元素。我们使用 "querySelectorAll('.lang')" 选择所有具有 class "lang" 的元素，并使用 "forEach()" 方法遍历 NodeList −
<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>
执行后，上述程序会显示所有 class 名称为 "lang" 的 "p" 元素 −
示例 4：检索 NodeList 的长度。
在下面的代码中，我们使用了 NodeList 的 'length' 属性来计算 NodeList 中的节点数量。
<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>
上述程序返回 NodeList 的长度 −
HTMLCollection 和 NodeList 的区别
HTMLCollection 和 NodeList 看起来相似，但它们之间存在细微差异，我们在下面的表格中进行了说明 −
| 特性 | HTMLCollection | NodeList |
|---|---|---|
| 返回方式 | 通常，getElementByClassName()、getElementByTagName 方法以及 children 属性返回 HTML collection。 | 通常，querySelectorAll() 方法和 childNodes 属性返回 Node list。 |
| Array 方法 | 它支持有限的 array 方法。 | 它也支持有限的 array 方法，如 forEach()。 |
| Live collection | 某些浏览器支持带有 HTML collection 的 live collection。 | 如果你更新 DOM 元素，它会更新。 |