JavaScript HTML DOM 集合(Collection)

最新推荐文章于 2024-05-17 13:52:13 发布

大哥的打嗝

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_47477471/article/details/129034129

版权

JavaScript 专栏收录该内容

72 篇文章 0 订阅

订阅专栏

HTML DOM 集合(Collection) 是 JavaScript 中一个重要的概念，它代表了一组 HTML 元素，并提供了访问和操作这些元素的方法。在本文中，我们将详细介绍 HTML DOM 集合 (Collection) 的作用和用途。

HTML DOM 集合 (Collection) 概述

HTML DOM 集合 (Collection) 是一组 HTML 元素，这些元素可以通过 JavaScript 代码进行访问和操作。HTML DOM 集合通常由一个或多个 HTML 元素组成，并提供了访问和操作这些元素的方法。HTML DOM 集合在 JavaScript 中非常常见，因为它们可以帮助我们轻松地访问和操作网页中的多个元素。

HTML DOM 集合 (Collection) 通常由以下三种类型的集合组成：

HTMLCollection: 该类型的集合包含了一组 HTML 元素，并且这些元素都是有序的。HTMLCollection 类型的集合通常是由一个 HTML 元素的属性（例如 getElementsByTagName、getElementsByClassName、children 等）返回的。
NodeList: 该类型的集合也包含了一组 HTML 元素，但是这些元素不一定是有序的。NodeList 类型的集合通常是由一个 JavaScript 对象（例如 document、Element 对象等）的属性（例如 childNodes、querySelectorAll 等）返回的。
NamedNodeMap: 该类型的集合包含了一组属性节点，这些属性节点通常是由一个 HTML 元素的 attributes 属性返回的。

HTML DOM 集合 (Collection) 在实际工作中的用途非常广泛。例如，我们可以使用 HTMLCollection 来获取表单中的所有输入元素，然后对这些元素进行验证和处理；我们也可以使用 NodeList 来获取一个页面中的所有链接，并添加一些自定义的事件处理程序；我们还可以使用 NamedNodeMap 来获取一个元素的所有属性，并进行相应的处理。

下面让我们通过一些示例代码来更加深入地理解 HTML DOM 集合 (Collection) 的作用和用途。

使用 NodeList 获取页面中的所有链接

NodeList 是另一种常见的集合类型，它通常由一些方法或属性返回。在下面的示例代码中，我们将使用 querySelectorAll 方法来获取页面中的所有链接，并为每个链接添加一个点击事件处理程序：

<!DOCTYPE html>
<html>
<head>
	<title>使用 NodeList 获取页面中的所有链接</title>
	<script type="text/javascript">
		window.onload = function() {
			var links = document.querySelectorAll("a");
			for (var i = 0; i < links.length; i++) {
				var link = links[i];
				link.addEventListener("click", function(event) {
					event.preventDefault();
					alert("你点击了 " + this.href);
				});
			}
		}
	</script>
</head>
<body>
	<a href="https://www.example.com/">链接1</a>
	<a href="https://www.example.com/">链接2</a>
	<a href="https://www.example.com/">链接3</a>
	<a href="https://www.example.com/">链接4</a>
	<a href="https://www.example.com/">链接5</a>
</body>
</html>

在上面的示例代码中，我们使用 querySelectorAll 方法来获取页面中的所有链接，并使用 addEventListener 方法为每个链接添加一个点击事件处理程序。当用户点击链接时，会弹出一个提示框，显示该链接的 URL。我们还使用 event.preventDefault() 方法来阻止默认的链接跳转行为。

使用 NamedNodeMap 获取元素的属性

NamedNodeMap 是 HTML DOM 中另一个常见的集合类型，它通常由一个元素的 attributes 属性返回。在下面的示例代码中，我们将使用 attributes 属性和 getNamedItem 方法来获取一个元素的所有属性，并将它们添加到一个表格中：

<!DOCTYPE html>
<html>
<head>
	<title>使用 NamedNodeMap 获取元素的属性</title>
	<script type="text/javascript">
		window.onload = function() {
			var element = document.getElementById("myElement");
			var attributes = element.attributes;
			var table = document.createElement("table");
			var tbody = document.createElement("tbody");
			for (var i = 0; i < attributes.length; i++) {
				var attribute = attributes.item(i);
				var tr = document.createElement("tr");
				var td1 = document.createElement("td");
				var td2 = document.createElement("td");
				td1.textContent = attribute.name;
				td2.textContent = attribute.value;
				tr.appendChild(td1);
				tr.appendChild(td2);
				tbody.appendChild(tr);
			}
			table.appendChild(tbody);
			document.body.appendChild(table);
		}
	</script>
</head>
<body>
	<div id="myElement" class="myClass" data-id="12345">这是一个元素</div>
</body>
</html>

在上面的示例代码中，我们使用 getElementById 方法来获取一个具有多个属性的元素，并使用 attributes 属性和 item 方法来获取该元素的所有属性。我们还创建了一个表格，将元素的属性名称和属性值添加到表格中，并将表格添加到文档中。

Web 开发领域中，使用 HTML DOM 集合 (Collection) 可以更加方便地访问和操作文档中的元素、节点和属性。我们已经介绍了 HTMLCollection、NodeList 和 NamedNodeMap 三种集合类型，以及它们在实际开发中的应用。

HTMLCollection 是最常见的集合类型，可以通过访问元素的特定属性来获取。我们可以使用 HTMLCollection 来获取文档中的所有图片、表单元素、表格元素等，并对它们进行操作。

NodeList 是另一种常见的集合类型，通常由一些方法或属性返回。我们可以使用 NodeList 来获取文档中的所有链接、段落、列表项等，并为它们添加事件处理程序或执行其他操作。

NamedNodeMap 是 HTML DOM 中另一个常见的集合类型，通常由元素的 attributes 属性返回。我们可以使用 NamedNodeMap 来获取元素的所有属性，并将它们添加到表格中。

在实际开发中，我们经常需要遍历 HTML DOM 集合，并对集合中的元素执行相同的操作。在上面的示例代码中，我们演示了如何使用循环语句和条件语句来遍历集合，并对每个元素执行相同的操作。

另外，我们还学习了如何向集合中添加和删除元素，以及如何检查集合中是否存在特定元素或属性。

最后，我们还讨论了 HTML DOM 集合的一些局限性，包括集合的实时性和集合元素的顺序。在实际开发中，我们需要注意这些局限性，并选择适当的集合类型来操作文档中的元素、节点和属性。

总的来说，HTML DOM 集合 (Collection) 是 JavaScript 中一个非常重要的概念，掌握它的使用方法可以大大提高我们的 Web 开发效率。在实际开发中，我们需要根据具体情况选择适当的集合类型，并使用循环语句、条件语句和其他技巧来遍历和操作集合中的元素、节点和属性。

大哥的打嗝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript HTML DOM 集合(Collection)

HTML DOM 集合 (Collection) 是一组 HTML 元素，这些元素可以通过 JavaScript 代码进行访问和操作。HTML DOM 集合通常由一个或多个 HTML 元素组成，并提供了访问和操作这些元素的方法。HTML DOM 集合在 JavaScript 中非常常见，因为它们可以帮助我们轻松地访问和操作网页中的多个元素。HTMLCollection: 该类型的集合包含了一组 HTML 元素，并且这些元素都是有序的。
复制链接

扫一扫