JavaScript - DOM 集合

上一页
下一页

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

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

  • HTMLCollection 对象是 HTML 元素的数组状列表（集合）。
  • NodeList 对象是从文档中提取的节点列表（集合）。
  • HTML DOM 中的 Form 元素集合用于设置或返回表单元素内所有 <input> 元素的集合。
  • HTML DOM forms 集合用于将 HTML 文档中存在的所有表单元素作为集合返回。

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

  • 遍历 DOM
  • 添加、删除或修改元素
  • 更改元素的样式或内容
  • 响应用户事件

本教程提供了对 DOM 集合的基本理解，特别是 HTMLCollection 对象。另一种类型的 DOM 集合将在下一章中讨论。

HTMLCollection 对象

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

它与数组相同，但与数组不同。您可以遍历 HTML 集合并通过索引访问每个 HTML 元素，但可以将 pop（）、push（） 等方法用于 HTML 集合。

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

  • getElementByTagName（） 方法
  • getElementByClassname（） 方法
  • children 属性

HTMLCollection 对象的属性和方法

在这里，我们列出了可用于 HTML 集合的属性和方法。

方法 / 属性 描述
length 获取集合中 HTML 元素的计数。
item() 从特定索引中获取元素。
namedItem() 使用给定集合中的 id 获取 HTML 元素。

示例：遍历 Collection 元素

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

在 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>

示例：获取集合的长度

在下面的代码中，我们使用集合的 '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 Object 和 DOM Elements 的集合

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

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

集合名称 描述
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 元素的类名集合。
打印本页
上一页
下一页