DOM 操作基础316

## JavaScript DOM 操作

文档对象模型 (DOM) 是一个应用程序编程接口 (API)，它允许脚本语言访问、修改和创建 HTML 和 XML 文档。在 JavaScript 中，DOM 操作非常重要，因为它使我们能够动态地修改网页的内容和行为。

要访问 DOM，可以使用 `document` 对象，它代表当前的 HTML 文档。从 `document` 对象，我们可以访问文档中的所有元素，并对其进行各种操作，例如获取和设置属性值、添加和删除元素以及监听事件。

获取 DOM 元素

获取 DOM 元素有多种方法，最常见的方法是使用以下方法：* `getElementById()`: 根据其 ID 获取一个元素。
* `getElementsByTagName()`: 根据其标签名称获取所有匹配元素的列表。
* `getElementsByClassName()`: 根据其类名获取所有匹配元素的列表。
* `querySelector()`: 使用 CSS 选择器获取第一个匹配的元素。
* `querySelectorAll()`: 使用 CSS 选择器获取所有匹配元素的列表。

修改 DOM 元素

一旦获取了 DOM 元素，就可以修改其属性值、添加或删除子元素以及添加或删除整个元素。以下是修改 DOM 元素的一些常见方法：* `setAttribute()`: 设置元素的属性值。
* `getAttribute()`: 获取元素的属性值。
* `appendChild()`: 将一个元素作为子元素添加到另一个元素。
* `insertBefore()`: 将一个元素插入到另一个元素之前。
* `removeChild()`: 从父元素中删除一个元素。

事件监听

事件监听是一项重要的 DOM 操作技术，可让我们为 DOM 元素上发生的事件（例如单击、鼠标悬停或键盘按下）添加处理函数。这是通过使用 `addEventListener()` 方法完成的，该方法将事件处理函数作为第二个参数。以下是添加事件监听器的一些常见事件：* `click`:单击事件。
* `mouseenter`:鼠标悬停事件。
* `mouseleave`:鼠标离开事件。
* `keydown`:键盘按下事件。
* `keyup`:键盘松开事件。

DOM 操作实践

以下是一些使用 JavaScript DOM 操作的实际示例：* 更改元素文本内容：
```javascript
const paragraph = ("my-paragraph");
= "New text content";
```
* 添加新元素：
```javascript
const newElement = ("div");
= "New element";
(newElement);
```
* 删除元素：
```javascript
const elementToRemove = ("element-to-remove");
(elementToRemove);
```
* 添加事件监听器：
```javascript
const button = ("my-button");
("click", function() {
alert("Button clicked!");
});
```

结论