网站搭建三：DOM 操作

目录

1. 什么是DOM？

2. 选择元素

2.1 使用 getElementById

2.2 使用 querySelector

2.3 其他选择方式

3. 修改元素内容

3.1 修改文本内容

3.2 修改HTML内容

3.3 修改属性

4. 添加和删除元素

4.1 添加元素

4.2 删除元素

5. 事件处理

6. 事件冒泡与捕获

7. 总结

DOM（文档对象模型）是 JavaScript 操作网页内容的关键。通过DOM，我们可以动态地操纵HTML和CSS，使网页实现交互性和动态性。在本文中，我们将深入学习DOM的基本概念，包括如何选择元素、修改内容、添加新元素，以及如何处理用户交互的事件。

1. 什么是DOM？

DOM 是一种将网页文档表示为树形结构的方式。每个HTML元素都是树中的一个节点，可以通过 JavaScript 来访问和修改这些节点。DOM 提供了一组 API，使开发者能够以编程方式操作网页内容。

2. 选择元素

在DOM中，选择元素是最常见的操作之一。我们可以使用多种方式来选择元素，其中最基础的方法是使用 document.getElementById 和 document.querySelector。

2.1 使用 getElementById

// 获取id为 "myElement" 的元素
let elementById = document.getElementById("myElement");

2.2 使用 querySelector

// 获取第一个匹配的类名为 "myClass" 的元素
let elementByClass = document.querySelector(".myClass");

2.3 其他选择方式

还有其他一些选择元素的方法，如 getElementsByClassName、getElementsByTagName 和 querySelectorAll。选择方法的选择取决于你的需求和个人偏好。

3. 修改元素内容

一旦选择了元素，我们可以通过DOM修改它们的内容。这包括修改元素的文本内容、HTML内容以及属性。

3.1 修改文本内容

// 获取元素
let myElement = document.getElementById("myElement");

// 修改文本内容
myElement.textContent = "新的文本内容";

3.2 修改HTML内容

// 获取元素
let myElement = document.getElementById("myElement");

// 修改HTML内容
myElement.innerHTML = "<strong>加粗文本</strong>";

3.3 修改属性

// 获取元素
let myElement = document.getElementById("myElement");

// 修改属性
myElement.setAttribute("src", "new-image.jpg");

4. 添加和删除元素

在DOM中，我们可以通过JavaScript动态地添加和删除元素。

4.1 添加元素

// 创建新元素
let newElement = document.createElement("div");

// 设置新元素的内容
newElement.textContent = "新的元素";

// 获取父元素
let parentElement = document.getElementById("parentElement");

// 将新元素添加为父元素的子元素
parentElement.appendChild(newElement);

4.2 删除元素

// 获取要删除的元素
let elementToRemove = document.getElementById("elementToRemove");

// 获取父元素
let parentElement = elementToRemove.parentNode;

// 从父元素中移除要删除的元素
parentElement.removeChild(elementToRemove);

5. 事件处理

DOM事件是与网页交互的关键。通过事件，我们可以捕捉用户的行为（如点击、输入等），并执行相应的操作。以下是一个简单的事件处理的例子：

// 获取按钮元素
let myButton = document.getElementById("myButton");

// 添加点击事件处理
myButton.addEventListener("click", function() {
    alert("按钮被点击了！");
});

在这个例子中，当按钮被点击时，会弹出一个提示框。这是通过 addEventListener 方法为按钮添加了一个点击事件处理程序。

6. 事件冒泡与捕获

事件在DOM中遵循事件冒泡和事件捕获的原则。事件冒泡是从最具体的元素开始，逐级向上传播。事件捕获则是从最不具体的元素开始，逐级向下捕获。

// 添加点击事件处理，使用事件冒泡
document.addEventListener("click", function() {
    alert("文档被点击了！");
}, false);

在这个例子中，当文档被点击时，由于第三个参数为 false，事件会采用事件冒泡方式传播，从最具体的元素开始向上传播。

7. 总结

学习DOM操作是成为一名优秀前端开发者的关键一步。本文介绍了DOM的基本概念，包括选择元素、修改元素内容、添加和删除元素以及事件处理等方面。通过不断实践和深入学习，你将能够灵活运用这些知识，创建交互性强、动态性十足的网页应用。DOM操作是前端开发中不可或缺的技能，希望这篇文章能够帮助你更好地理解和掌握这方面的知识。