DOM操作指南

DOM操作指南

1. DOM 简介

DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。它允许程序员以编程的方式访问、修改和操作文档的内容、结构和样式。

2. DOM 元素选择器

DOM 元素选择器是用于选择文档中元素的语法。常用的元素选择器包括：

• 标签选择器：选择指定标签的元素，例如 p、div 等。
• 类选择器：选择具有指定类名的元素，例如 .my-class。
• ID 选择器：选择具有指定 ID 的元素，例如 #my-id。
• 通配符选择器：选择所有元素，例如 *。

3. 节点类型

DOM 节点是 DOM 文档中的基本单位。节点可以是元素、文本、注释、处理指令等。

4. 访问节点

可以按以下方法访问节点：

• document.getElementById()：通过 ID 查找元素。
• document.getElementsByClassName()：通过类名查找元素。
• document.getElementsByTagName()：通过标签名查找元素。
• document.querySelector()：使用选择器查找第一个元素。
• document.querySelectorAll()：使用选择器查找所有元素。

5. 更改节点内容

可以使用以下方法更改节点内容：

• innerHTML 属性：获取或设置元素的 HTML 内容。
• innerText 属性：获取或设置元素的文本内容。
• value 属性：获取或设置输入元素的值。

6. 操作属性、样式和类

可以使用以下方法操作属性、样式和类：

• setAttribute() 方法：设置元素的属性。
• getAttribute() 方法：获取元素的属性。
• style 属性：获取或设置元素的样式。
• classList 属性：获取或设置元素的类。

7. 遍历 DOM 树

可以使用以下方法遍历 DOM 树：

• parentNode 属性：获取元素的父节点。
• childNodes 属性：获取元素的子节点。
• firstChild 属性：获取元素的第一个子节点。
• lastChild 属性：获取元素的最后一个子节点。
• nextSibling 属性：获取元素的下一个兄弟节点。
• previousSibling 属性：获取元素的上一个兄弟节点。

8. 示例

以下是一个使用 DOM 操作的示例：

// 获取具有类名 "my-class" 的元素
const elements = document.getElementsByClassName("my-class");

// 循环遍历元素并更改其内容
for (let i = 0; i < elements.length; i++) {
  elements[i].innerHTML = "Hello, world!";
}

9. 总结

DOM 操作是前端开发的基础知识。掌握了 DOM 操作，可以轻松地实现各种网页效果。