JavaScript - DOM 節點列表

DOM 節點列表

NodeList 類似於陣列或包含 HTML 元素的 HTMLCollection。但是，它與陣列或 HTML 集合並不相同。

當您使用 querySelectorAll() 方法和 childNodes 屬性時，所有現代瀏覽器都會返回節點列表。您可以像陣列一樣遍歷NodeList，但不能使用其他陣列方法，例如 map()、filter() 等，與節點列表一起使用。

下圖清楚地解釋了 JavaScript NodeList 介面。如您所見，HTML 程式碼片段包含所有型別的節點

JavaScript DOM NodeList 方法

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

序號	方法和描述
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');
        //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", ()=>{
      //using getElementsByTagName() method
      let myNodeList = document.getElementsByTagName('div');
      //using length property
      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 看起來很相似，但它們之間存在細微的差別，我們在下面的表格中進行了說明 -

特性	HTMLCollection	NodeList
返回值	通常，getElementByClassName()、getElementByTagName() 方法以及 children 屬性返回 HTML 集合。	通常，querySelectorAll() 方法和 childNodes 屬性返回 Node 列表。
陣列方法	它支援有限的陣列方法。	它也支援有限的陣列方法，例如 forEach()。
動態集合	一些瀏覽器支援 HTML 集合的動態集合。	如果更新 DOM 元素，它會更新。

列印頁面