JavaScript - DOM NodeList

DOM 节点列表

NodeList类似于包含 HTML 元素的数组或 HTMLCollection。但是，它与数组或 HTML 集合不同。

所有现代浏览器在使用 querySelectorAll() 方法和 childNodes 属性时都会返回节点列表。您可以将 NodeList 作为数组遍历，但不能对节点列表使用其他数组方法，例如 map()、filter() 等。

下图清晰地解释了 JavaScript NodeList 接口。如您所见，一段 HTML 代码片段包含所有类型的节点:

JavaScript DOM NodeList 方法

以下是 JavaScript NodeList 提供的方法列表 -

JavaScript DOM NodeList 属性

以下是 JavaScript 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');
        //you can access the node list by index
        //access the third node list
        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')"选择所有带有"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>

执行后，上述程序将显示所有类名为"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 看起来很相似，但它们之间存在细微的差别，我们在下表中对此进行了解释 -