JavaScript - DOM 集合

DOM 集合

DOM（文件物件模型）集合是一種將相關的 HTML 元素組合在一起的方法。它們是隻讀的，可以使用 DOM 物件（例如 document 物件或 DOM 節點）的屬性來訪問。

有許多不同型別的 DOM 集合，包括：

HTMLCollection 物件是 HTML 元素的類似陣列的列表（集合）。
NodeList 物件是從文件中提取的節點列表（集合）。
HTML DOM 中的表單元素集合用於設定或返回表單元素內所有 <input> 元素的集合。
HTML DOM 表單集合用於將 HTML 文件中存在的所有表單元素作為集合返回。

DOM 集合可以用於執行各種任務，例如：

遍歷 DOM
新增、刪除或修改元素
更改元素的樣式或內容
響應使用者事件

本教程提供對 DOM 集合，特別是 HTMLCollection 物件的基本理解。其他型別的 DOM 集合將在接下來的章節中討論。

HTMLCollection 物件

HTMLCollection 物件是 HTML 元素的類似陣列的資料結構。當您使用 getElementByTagName() 方法訪問 DOM 元素時，它將返回一個 HTMLCollection 物件。

它與陣列類似，但不是陣列。您可以遍歷 HTML 集合並透過索引訪問每個 HTML 元素，但不能對 HTML 集合使用 pop()、push() 等方法。

以下方法和屬性返回 HTML 集合。

DOM HTMLCollection 物件的屬性和方法

這裡，我們列出了可以與 HTML 集合一起使用的屬性和方法。

方法/屬性	描述
length	獲取集合中 HTML 元素的數量。
item()	從特定索引獲取元素。
namedItem()	使用其 id 從給定集合中獲取 HTML 元素。

示例：遍歷集合元素

在下面的程式碼中，我們添加了數字列表。

在 JavaScript 中，我們使用 getElementByTagName() 方法訪問所有 <li> 元素，該方法返回 HTML 集合。

之後，我們使用for...of迴圈遍歷每個HTML元素。集合中包含物件格式的每個HTML元素。我們使用每個集合元素的innerHTML屬性獲取其HTML並將其列印到網頁上。

<DOCTYPE html>
<html>
<body>
   <ul>
      <li> One </li>
      <li> Two </li>
      <li> Three </li>
   </ul>

   <div id = "output"> </div>
   <script>
      const output = document.getElementById('output');
      let lists = document.getElementsByTagName('li');
      for (let list of lists) {
         output.innerHTML += "inner HTML - " + list.innerHTML + "<br>";
      }
   </script>
</body>
</html>

示例：獲取集合的長度

在下面的程式碼中，我們使用集合的“length”屬性來獲取集合中元素的數量。

<DOCTYPE html>
<html>
<body>
   <div class = "text"> JavaScript </div>
   <div class = "text"> HTML </div>
   <div class = "text"> CSS </div>
   <div class = "text"> CPP </div>
   <div id = "output">The length of the collection is: </div>
   <script>
      const divs = document.getElementsByClassName('text');
      document.getElementById('output').innerHTML += " " + divs.length;
   </script>
</body>
</html>

示例：使用namedItem方法與集合

在下面的程式碼中，我們使用getElementByClassName()方法訪問所有<div>元素，返回<div>元素的集合。

之後，我們使用namedItem()方法訪問id等於“JavaScript”的<div>元素。

<DOCTYPE html>
<html>
<body>
   <div class = "text" id = "JavaScript"> JavaScript </div>
   <div class = "text" id = "PHP"> PHP </div>
   <div class = "text" id = "Python"> Python </div>
   <div class = "text" id = "Java"> Java </div>
   <div id = "output">The Element having id equal to JavaScript is: </div>
   <script>
      const output = document.getElementById('output');
      const langs = document.getElementsByClassName('text');
      output.innerHTML += langs.namedItem('JavaScript').innerHTML;
   </script>
</body>
</html>

文件物件和DOM元素的集合

文件物件包含一些內建集合，用於從文件中獲取元素。

在下表中，我們列出了可以使用文件物件訪問的所有集合。

集合名稱	描述
document.links	獲取文件中的所有<a>元素。
document.forms	獲取文件中的所有<form>元素。
document.images	獲取文件中的所有<img>元素。
document.scripts	獲取文件中的所有<script>元素。
document.styleSheets	獲取文件中的所有<link>和<style>元素。
Element.children	獲取特定HTML元素的所有子元素的集合。
element.attributes	獲取給定元素的所有屬性的集合。
element.options	獲取文件中的所有<option>元素。
element.classList	獲取特定DOM元素的類名集合。

列印頁面