如何用 JavaScript 操作 DOM245

在现代 Web 开发中，操作文档对象模型 (DOM) 是必不可少的。DOM 是表示 HTML 文档结构和内容的树形数据结构。通过操作 DOM，我们可以在客户端动态地更新和修改网页，从而提供更加交互和响应式的用户体验。

JavaScript 提供了几种方法来操作 DOM。在本文中，我们将介绍最常见和有用的方法，包括获取元素、修改元素、创建新元素和事件处理。

获取元素

要获取 DOM 中的元素，我们可以使用 () 和 () 方法。这两个方法都接受一个 CSS 选择器作为参数，并返回第一个匹配元素（对于 ()）或所有匹配元素（对于 ()）。const element = ("p");
const elements = ("div");

修改元素

修改 DOM 中的元素涉及更新其属性、样式和内容。我们可以使用以下方法：
：获取或设置元素的 HTML 内容。
：获取或设置元素的文本内容。
：获取或设置元素的 CSS 样式。
：添加、删除或检查元素的类名。

= "新内容";
= "red";
("active");

创建新元素

要创建新的 DOM 元素，我们可以使用 () 方法。该方法接受一个标签名作为参数并返回一个新的元素。const newElement = ("p");

创建后，我们可以将新元素添加到 DOM 中使用 () 方法。(newElement);

事件处理

事件处理使我们能够响应用户交互。我们可以使用 () 方法将事件侦听器附加到元素。("click", function() {
// 鼠标点击事件的处理函数
});

在处理函数中，我们可以执行各种操作，例如更新 DOM、显示警报或触发 AJAX 请求。

示例

以下示例演示如何使用 JavaScript 操作 DOM 来动态更新网页内容：


JavaScript DOM 操作

欢迎来到 JavaScript DOM 操作示例！ 单击以更改消息

const messageElement = ("#message");
const buttonElement = ("#button");
("click", function() {
= "DOM 已被更新！";
});

本文介绍了使用 JavaScript 操作 DOM 的基础知识。通过利用这些方法，我们可以动态地修改网页内容，创建交互式用户界面并响应用户交互。掌握这些技术对于任何 Web 开发人员来说都是必不可少的。

2025-01-24

上一篇：JavaScript 中读取数据的便捷指南

下一篇：JavaScript 中值传递与引用传递