Javascript 简明教程
JavaScript - DOM Collections
DOM （文档对象模型） collections 是将相关的 HTML 元素分组在一起的方法。它们是只读的，可以使用 DOM 对象（如文档对象或 DOM 节点）的属性访问它们。
The DOM (Document Object Model) collections are a way to group together related HTML elements. They are read-only and can be accessed using the properties of DOM objects such as the document object or a DOM node.
有许多不同类型的 DOM 集合，包括：
There are many different types of DOM collections, including:
-
The HTMLCollection object is an array-like list (collection) of HTML elements.
-
The NodeList object is a list (collection) of nodes extracted from a document.
-
The Form element collection in HTML DOM is used to set or return the collection of all <input> elements inside a form element.
-
The HTML DOM forms collection is used for returning all the form elements that are present inside the HTML document as a collection.
DOM 集合可用于执行各种任务，例如：
DOM collections can be used to perform a variety of tasks, such as:
-
Traversing the DOM
-
Adding, removing, or modifying elements
-
Changing the style or content of elements
-
Responding to user events
本教程提供了对 DOM 集合（尤其是 HTMLCollection 对象）的基本理解。其他类型的 DOM 集合将在下一章中讨论。
This tutorial provides basic understanding of DOM collections, particularly HTMLCollection object. The other type of DOM collections are discussed in next chapters.
The HTMLCollection Object
HTMLCollection 对象是 HTML 元素的类数组数据结构。当您使用 getElementByTagName()方法来访问 DOM 元素时，它将返回一个 HTMLCollection 对象。
An HTMLCollection object is an array-like data structure of HTML elements. When you use the getElementByTagName()method to access DOM elements, it returns an HTMLCollection object.
它与数组相同，但 not an array 。您可以遍历 HTML 集合并通过索引访问每个 HTML 元素，但是您可以对 HTML 集合使用 pop()、push() 等方法。
It is the same as an array but not an array. You can traverse the HTML collection and access each HTML element through the index, but you can use the pop(), push(), etc. methods with HTML collection.
下面给出的方法和属性返回 HTML 集合。
The methods and properties given below return the HTML collection.
-
getElementByTagName() method
-
getElementByClassname() method
-
children property
Properties and Methods of HTMLCollection Object
这里，我们列出了可与 HTML 集合一起使用的属性和方法。
Here, we have listed the properties and methods that can be used with HTML collections.
Method / Property |
Description |
length |
To get a count of HTML elements in the collection. |
item() |
To get elements from the specific index. |
namedItem() |
To get the HTML element using its id from the given collection. |
Example: Traversing the Collection Elements
在下面的代码中，我们添加了数字列表。
In the below code, we have added the list of numbers.
在 JavaScript 中，我们使用 getElementByTagName() 方法访问所有 <li> 元素，该方法返回 HTML 集合。
In JavaScript, we access all <li> elements using the getElementByTagName() method, which returns the HTML collection.
之后，我们使用 for…of 循环遍历每个 HTML 元素。该集合以对象格式包含每个 HTML 元素。我们对集合的每个元素使用 innnerHTML 属性以获取其 HTML 并将其打印在网页上。
After that, we use the for…of loop to traverse each HTML element. The collection contains each HTML element in the object format. We used the innnerHTML property with each element of the collection to get its HTML and print it on the web page.
<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”属性获取集合中的元素数量。
In the below code, we used the 'length' property of the collection to get the number of elements in the collection.
<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> 元素的集合。
In the below code, we access all <div> elements using the getElementByClassName() method, returning the collection of <div> elements.
之后，我们使用 namedItem() 方法访问 id 等于“JavaScript”的 <div> 元素。
After that, we used the namedItem() method to access the <div> element having id equal to 'JavaScript'.
<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 对象包含一些内置集合来从文档中获取元素。
The document object contains some built-in collection to get the elements from the document.
在下面的表格中，我们列出了可以使用 document 对象访问的所有集合。
In the below table, we have listed all collections which can be accessed using the document object.
Collection Name |
Description |
document.links |
To get all <a> elements from the document. |
document.forms |
To get all <form> elements from the document. |
document.images |
To get all <img> elements from the document. |
document.scripts |
To get all <script> elements from the document. |
document.styleSheets |
To get all the document’s <link> and <style> elements. |
Element.children |
To get a collection of all children of the particular HTML element. |
element.attributes |
To get the collection of all attributes of the given element. |
element.options |
To get all <options> elements from the document. |
element.classList |
To get a collection of class names of a particular DOM element. |