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元素的类名集合。

打印页面