Javascript 简明教程

JavaScript - DOM Collections

DOM （文档对象模型） collections 是将相关的 HTML 元素分组在一起的方法。它们是只读的，可以使用 DOM 对象（如文档对象或 DOM 节点）的属性访问它们。

有许多不同类型的 DOM 集合，包括：

  1. HTMLCollection 对象是 HTML 元素的数组样列表（集合）。

  2. NodeList 对象是从文档中提取的节点（集合）列表。

  3. 在 HTML DOM 中，表单元素集合用于设置或返回表单元素内所有 <input> 元素的集合。

  4. HTML DOM forms 集合用于返回 HTML 文档中存在的所有表单元素作为一个集合。

DOM 集合可用于执行各种任务，例如：

  1. Traversing the DOM

  2. 添加、移除或修改元素

  3. 更改元素的样式或内容

  4. Responding to user events

本教程提供了对 DOM 集合（尤其是 HTMLCollection 对象）的基本理解。其他类型的 DOM 集合将在下一章中讨论。

The HTMLCollection Object

HTMLCollection 对象是 HTML 元素的类数组数据结构。当您使用 getElementByTagName()方法来访问 DOM 元素时，它将返回一个 HTMLCollection 对象。

它与数组相同，但 not an array 。您可以遍历 HTML 集合并通过索引访问每个 HTML 元素，但是您可以对 HTML 集合使用 pop()、push() 等方法。

下面给出的方法和属性返回 HTML 集合。

  1. getElementByTagName() method

  2. getElementByClassname() method

  3. children property

Properties and Methods of HTMLCollection Object

这里，我们列出了可与 HTML 集合一起使用的属性和方法。

Method / Property

Description

length

获取集合中 HTML 元素的数量。

item()

从特定索引获取元素。

namedItem()

使用其 id 从给定集合中获取 HTML 元素。

Example: Traversing the Collection Elements

在下面的代码中，我们添加了数字列表。

在 JavaScript 中，我们使用 getElementByTagName() 方法访问所有 <li> 元素，该方法返回 HTML 集合。

之后，我们使用 for…of 循环遍历每个 HTML 元素。该集合以对象格式包含每个 HTML 元素。我们对集合的每个元素使用 innnerHTML 属性以获取其 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>

Example: Getting the length of the collection

在下面的代码中，我们使用集合的“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>

Example: Using the namedItem method with collection

在下面的代码中，我们使用 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>

Collections of document Object and DOM Elements

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

在下面的表格中，我们列出了可以使用 document 对象访问的所有集合。

Collection Name

Description

document.links

从文档中获取所有 <a> 元素。

document.forms

从文档中获取所有 <form> 元素。

document.images

要从文档获取所有 <img> 元素。

document.scripts

要从文档获取所有 <script> 元素。

document.styleSheets

要获取文档的所有 <link> 和 <style> 元素。

Element.children

要获取特定 HTML 元素所有子项的集合。

element.attributes

要获取给定元素的所有属性的集合。

element.options

要从文档获取所有 <options> 元素。

element.classList

要获取特定 DOM 元素的类名集合。