JavaScript DOM 操作指南81

什么是 DOM？

文档对象模型 (DOM) 是 JavaScript 用来表示和操作 HTML 文档的编程接口。它提供了一个分层的结构，其中每个 HTML 元素都表示为一个对象。DOM 允许您访问、修改和创建文档中的元素和属性。

访问 DOM 元素

您可以使用以下方法之一访问特定 DOM 元素：
getElementById()：通过元素的 id 查找元素
getElementsByClassName()：通过元素的 class 名查找所有元素
getElementsByTagName()：通过元素的标签名查找所有元素
querySelectorAll()：使用 CSS 选择器查找元素

修改 DOM 元素

一旦访问了 DOM 元素，您可以使用以下方法修改它：
innerHTML：设置或获取元素的 HTML 内容
innerText：设置或获取元素的文本内容
style：获取或设置元素的样式属性
setAttribute()：设置元素的属性

创建 DOM 元素

您还可以使用 JavaScript 创建新的 DOM 元素：
createElement()：创建一个新的 HTML 元素
createTextNode()：创建一个新的文本节点
appendChild()：将新元素添加到现有元素

事件处理

您可以使用事件处理程序将事件监听器添加到 DOM 元素。当触发事件（如单击或鼠标悬停）时，将调用事件处理程序函数。```javascript
("myButton").addEventListener("click", function() {
// 处理单击事件
});
```

DOM 操作示例

以下是几个 DOM 操作示例：
更改元素的文本内容：
```javascript
("myHeading").innerText = "新标题";
```
隐藏一个元素：
```javascript
("myElement"). = "none";
```
添加一个新的元素到文档：
```javascript
var newElement = ("p");
= "新段落";
(newElement);
```

总结

DOM 操作是 JavaScript 的一个重要方面，它使您能够与 HTML 文档交互。通过了解 DOM 如何工作以及如何使用 JavaScript 访问、修改和创建元素，您可以创建动态和交互式 Web 应用程序。

2025-01-19

上一篇：JavaScript 获取事件

下一篇：JavaScript 内存泄露：根源、检测和预防