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 集合。

• getElementByTagName() 方法

• getElementByClassname() 方法

• children 属性

DOM HTMLCollection 对象的属性和方法

这里，我们列出了可用于 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>

document 对象和 DOM 元素的集合

document 对象包含一些内置集合，用于从文档中获取元素。

下表列出了所有可以使用 document 对象访问的集合。