JavaScript HTML DOM 元素 (节点)_html创建链接节点 dom-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47477471/article/details/129033897

文章介绍了HTMLDOM元素(节点)的概念，包括如何使用JavaScript来读取和修改网页内容、结构，以及动态创建和删除元素。同时阐述了HTMLDOM元素在处理网页事件中的应用，如添加事件监听器来响应用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML DOM 是指 HTML 文档对象模型，它是一种用于创建和处理 HTML 页面的标准 API。在 JavaScript 中，HTML DOM 可以被用来操作和修改网页的内容和结构。在本篇文章中，我们将详细探讨 JavaScript HTML DOM 元素 (节点)的作用以及在实际工作中的用途。

HTML DOM 元素 (节点) 的基础知识

HTML DOM 中的元素是指网页中的标签，如 <p>、<div>、<img> 等。在 HTML DOM 中，每个元素都可以作为一个节点进行处理。这些节点可以被 JavaScript 用来读取和修改网页的内容和结构。

在 HTML DOM 中，每个节点都有其自己的属性和方法。以下是一些常用的属性和方法：

innerHTML：获取或设置节点的 HTML 内容
textContent：获取或设置节点的文本内容
getAttribute：获取节点的属性值
setAttribute：设置节点的属性值
appendChild：在节点的末尾添加一个新的子节点
removeChild：从节点中删除一个子节点
parentNode：获取节点的父节点
childNodes：获取节点的所有子节点

下面是一个简单的示例代码，它演示了如何使用 JavaScript HTML DOM 元素 (节点) 来读取和修改一个网页的内容：

<!DOCTYPE html>
<html>
<head>
	<title>DOM Elements</title>
</head>
<body>
	<h1>My Heading</h1>
	<p>My paragraph.</p>

	<script>
		// 获取 h1 元素的文本内容
		var heading = document.getElementsByTagName("h1")[0].textContent;
		console.log(heading);

		// 修改 p 元素的 HTML 内容
		document.getElementsByTagName("p")[0].innerHTML = "My new paragraph.";
	</script>
</body>
</html>

在上面的代码中，我们使用了 getElementsByTagName 方法来获取网页中的 <h1> 和 <p> 元素。然后我们使用 textContent 和 innerHTML 属性来读取和修改元素的内容。

HTML DOM 元素 (节点) 的用途

HTML DOM 元素 (节点) 在 JavaScript 中有着广泛的应用。下面是一些常见的用途：

动态修改网页的内容和结构

使用 HTML DOM 元素 (节点)，我们可以动态地修改网页的内容和结构。例如，在一个网页上，我们可能需要根据用户的输入来动态地添加或删除一些元素。以下是一个简单的示例代码，它演示了如何使用 JavaScript HTML DOM 元素 (节点) 来添加和删除一个网页元素：

<!DOCTYPE html>
<html>
<head>
	<title>DOM Elements</title>
</head>
<body>
	<div id="myDiv">
		<p>My paragraph.</p>
	</div>

	<button onclick="add()">Add Element</button>
	<button onclick="remove()">Remove Element</button>

	<script>
		// 添加一个新的子元素
    	function add() {
		var div = document.getElementById("myDiv");
		var p = document.createElement("p");
		var text = document.createTextNode("My new paragraph.");
		p.appendChild(text);
		div.appendChild(p);
	}

	// 删除子元素
	function remove() {
		var div = document.getElementById("myDiv");
		var p = div.getElementsByTagName("p")[0];
		div.removeChild(p);
	}
    </script>
</body>
</html>

在上面的代码中，我们使用了 createElement 和 createTextNode 方法来创建一个新的 <p> 元素和其文本内容。然后我们使用 appendChild 方法将这个新的元素添加到 myDiv 元素中。最后，我们使用 removeChild 方法来删除 myDiv 元素中的第一个 <p> 子元素。

动态处理网页事件

HTML DOM 元素 (节点) 也可以用来处理网页上的事件，例如单击、鼠标移动、键盘输入等事件。我们可以使用 JavaScript 的事件监听器来监听这些事件，并在事件触发时执行相应的操作。以下是一个简单的示例代码，它演示了如何使用 JavaScript HTML DOM 元素 (节点) 来处理单击事件：

<!DOCTYPE html>
<html>
<head>
	<title>DOM Elements</title>
</head>
<body>
	<button id="myButton">Click me</button>

	<script>
		// 获取按钮元素
		var button = document.getElementById("myButton");

		// 添加单击事件监听器
		button.addEventListener("click", function() {
			alert("Button clicked!");
		});
	</script>
</body>
</html>

在上面的代码中，我们使用了 addEventListener 方法来监听按钮元素的单击事件。当按钮被单击时，将弹出一个警告框来显示一个消息。

在本文中，我们学习了 HTML DOM 元素 (节点) 的基本知识，包括如何使用 JavaScript 代码来动态创建、访问和操作 HTML 元素。我们还介绍了 HTML DOM 元素 (节点) 的一些实际用途，例如动态更新网页内容、处理网页事件、创建和操作表格等。

HTML DOM 元素 (节点) 是 Web 开发中非常重要的一个概念。了解 HTML DOM 元素 (节点) 可以让我们更加灵活地控制网页的结构和内容，从而提高 Web 应用程序的交互性和动态性。