DOM 操作：DOM 简介¶

概述¶

在本章中，我们将深入探讨文档对象模型（DOM）的基本概念。DOM 是 JavaScript 与网页内容交互的核心机制。通过 DOM，开发者可以动态地访问和操作 HTML 和 XML 文档的内容、结构和样式。

什么是 DOM？¶

文档对象模型（Document Object Model，简称 DOM）是 HTML 和 XML 文档的编程接口。它将文档解析为一个由节点和对象组成的树形结构，每个节点代表文档中的一个部分，如元素、属性或文本内容。通过 DOM，开发者可以使用 JavaScript 来动态地修改网页的内容、结构和样式。

DOM 树结构¶

DOM 将文档表示为一个树形结构，其中每个节点都是一个对象。树的根节点是 document 对象，它代表整个文档。从 document 开始，树的分支代表文档中的各个元素、属性和文本内容。

<!DOCTYPE html>
<html>
<head>
    <title>DOM 示例</title>
</head>
<body>
    <h1>欢迎来到 DOM 世界</h1>
    <p>这是一个段落。</p>
</body>
</html>

在这个例子中，<html> 是根元素，它有两个子节点：<head> 和 <body>。<head> 包含一个 <title> 元素，而 <body> 包含一个 <h1> 和一个 <p> 元素。

DOM 节点类型¶

DOM 树中的每个节点都有一个特定的类型。常见的节点类型包括：

元素节点：代表 HTML 元素，如 <div>、<p>、<h1> 等。
文本节点：代表元素中的文本内容。
属性节点：代表元素的属性，如 class、id 等。
文档节点：代表整个文档，即 document 对象。

访问 DOM 元素¶

在 JavaScript 中，我们可以使用多种方法来访问 DOM 元素。以下是几种常见的方法：

1. 通过 `id` 访问元素¶

document.getElementById() 方法可以通过元素的 id 属性来访问特定的元素。

// 获取 id 为 "header" 的元素
let header = document.getElementById("header");
console.log(header); // 输出: <h1 id="header">欢迎来到 DOM 世界</h1>

2. 通过标签名访问元素¶

document.getElementsByTagName() 方法可以通过标签名来访问一组元素。

// 获取所有的 <p> 元素
let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs); // 输出: HTMLCollection [ <p>这是一个段落。</p> ]

3. 通过类名访问元素¶

document.getElementsByClassName() 方法可以通过类名来访问一组元素。

// 获取所有类名为 "highlight" 的元素
let highlights = document.getElementsByClassName("highlight");
console.log(highlights); // 输出: HTMLCollection [ <p class="highlight">...</p> ]

修改 DOM 元素¶

一旦我们访问了 DOM 元素，就可以对其进行修改。以下是一些常见的操作：

1. 修改元素内容¶

我们可以使用 innerHTML 或 textContent 属性来修改元素的内容。

// 修改 id 为 "header" 的元素内容
let header = document.getElementById("header");
header.innerHTML = "你好，DOM！";

2. 修改元素样式¶

我们可以通过 style 属性来修改元素的样式。

// 修改 id 为 "header" 的元素的颜色
let header = document.getElementById("header");
header.style.color = "blue";

3. 添加和删除元素¶

我们可以使用 appendChild() 和 removeChild() 方法来添加和删除元素。

// 创建一个新的 <p> 元素
let newParagraph = document.createElement("p");
newParagraph.textContent = "这是一个新的段落。";

// 将新段落添加到 body 中
document.body.appendChild(newParagraph);

// 删除 id 为 "header" 的元素
let header = document.getElementById("header");
document.body.removeChild(header);

练习题¶

1. 简单练习¶

编写一个 JavaScript 函数，将页面中所有 <p> 元素的文本颜色改为红色。

function changeParagraphColor() {
    let paragraphs = document.getElementsByTagName("p");
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.color = "red";
    }
}

2. 中等练习¶

编写一个 JavaScript 函数，在页面中添加一个带有文本内容的 <div> 元素，并将其背景颜色设置为黄色。

function addDiv() {
    let newDiv = document.createElement("div");
    newDiv.textContent = "这是一个新的 div 元素。";
    newDiv.style.backgroundColor = "yellow";
    document.body.appendChild(newDiv);
}

3. 复杂练习¶

编写一个 JavaScript 函数，创建一个包含 5 个 <li> 元素的无序列表，并将其添加到页面中。

function createList() {
    let ul = document.createElement("ul");
    for (let i = 1; i <= 5; i++) {
        let li = document.createElement("li");
        li.textContent = "列表项 " + i;
        ul.appendChild(li);
    }
    document.body.appendChild(ul);
}

总结¶

在本主题中，我们学习了 DOM 的基本概念，包括 DOM 树结构、节点类型以及如何访问和修改 DOM 元素。我们还通过代码示例和练习题加深了对这些概念的理解。掌握 DOM 操作是 JavaScript 开发的基础，它为动态网页开发提供了强大的工具。

关键点¶

DOM 是 HTML 和 XML 文档的编程接口，它将文档表示为树形结构。
常见的 DOM 节点类型包括元素节点、文本节点、属性节点和文档节点。
可以使用 getElementById()、getElementsByTagName() 和 getElementsByClassName() 等方法访问 DOM 元素。
可以通过 innerHTML、textContent 和 style 等属性修改 DOM 元素的内容和样式。
可以使用 appendChild() 和 removeChild() 方法添加和删除 DOM 元素。

通过本主题的学习，你应该能够理解 DOM 的基本概念，并能够使用 JavaScript 进行简单的 DOM 操作。接下来，你可以继续学习更高级的 DOM 操作技巧，如事件处理和动态内容更新。