JavaScript DOM 操作：选择元素¶
在网页开发中，JavaScript 的一个重要功能是操作文档对象模型（DOM）。DOM 是网页的编程接口，它允许我们通过 JavaScript 动态地访问和操作网页的内容、结构和样式。在本章中，我们将学习如何使用 JavaScript 选择网页中的元素。
1. 什么是 DOM？¶
DOM（Document Object Model）是一个树形结构的对象模型，它将 HTML 文档表示为一个由节点和对象组成的树。每个 HTML 元素（如 <div>、<p>、<h1> 等）都是树中的一个节点。通过 JavaScript，我们可以访问这些节点并对其进行操作。
2. 选择元素的方法¶
JavaScript 提供了多种方法来选择 DOM 中的元素。以下是几种常用的方法：
2.1 document.getElementById()¶
document.getElementById() 方法通过元素的 id 属性来选择元素。由于 id 在 HTML 文档中是唯一的，因此这个方法返回的是一个单独的元素。
// 示例 1: 通过 id 选择元素
// HTML: <div id="header">这是页面的头部</div>
// 选择 id 为 "header" 的元素
let headerElement = document.getElementById("header");
// 修改元素的内容
headerElement.textContent = "欢迎来到我的网站！";
解释： - document.getElementById("header") 选择了一个 id 为 header 的元素。 - headerElement.textContent = "欢迎来到我的网站！"; 修改了该元素的文本内容。
2.2 document.getElementsByClassName()¶
document.getElementsByClassName() 方法通过元素的 class 属性来选择元素。由于 class 可以应用于多个元素，因此这个方法返回的是一个 HTMLCollection（类似于数组的对象）。
// 示例 2: 通过 class 选择元素
// HTML: <p class="highlight">这是一个高亮段落。</p>
// <p class="highlight">这是另一个高亮段落。</p>
// 选择所有 class 为 "highlight" 的元素
let highlightElements = document.getElementsByClassName("highlight");
// 遍历所有选中的元素并修改它们的样式
for (let i = 0; i < highlightElements.length; i++) {
highlightElements[i].style.color = "red";
}
解释： - document.getElementsByClassName("highlight") 选择了所有 class 为 highlight 的元素。 - 使用 for 循环遍历这些元素，并将它们的文本颜色设置为红色。
2.3 document.querySelector() 和 document.querySelectorAll()¶
document.querySelector() 和 document.querySelectorAll() 方法使用 CSS 选择器来选择元素。querySelector() 返回第一个匹配的元素，而 querySelectorAll() 返回所有匹配的元素（一个 NodeList）。
// 示例 3: 使用 CSS 选择器选择元素
// HTML: <ul>
// <li class="item">第一项</li>
// <li class="item">第二项</li>
// <li class="item">第三项</li>
// </ul>
// 选择第一个 class 为 "item" 的元素
let firstItem = document.querySelector(".item");
// 选择所有 class 为 "item" 的元素
let allItems = document.querySelectorAll(".item");
// 修改第一个元素的文本内容
firstItem.textContent = "这是修改后的第一项";
// 遍历所有元素并添加边框
allItems.forEach(item => {
item.style.border = "1px solid black";
});
解释： - document.querySelector(".item") 选择了第一个 class 为 item 的元素。 - document.querySelectorAll(".item") 选择了所有 class 为 item 的元素。 - 使用 forEach 方法遍历所有选中的元素，并为它们添加边框。
3. 练习题¶
练习题 1: 选择并修改元素¶
任务： - 在 HTML 文档中创建一个 id 为 main-title 的 <h1> 元素。 - 使用 JavaScript 选择该元素并将其文本内容修改为 "欢迎来到 JavaScript 世界！"。
提示： - 使用 document.getElementById() 方法选择元素。
练习题 2: 选择并操作多个元素¶
任务： - 在 HTML 文档中创建多个 class 为 highlight 的 <p> 元素。 - 使用 JavaScript 选择所有 class 为 highlight 的元素，并将它们的背景颜色设置为黄色。
提示： - 使用 document.getElementsByClassName() 方法选择元素。
练习题 3: 使用 CSS 选择器选择元素¶
任务： - 在 HTML 文档中创建一个包含多个 <li> 元素的 <ul> 列表。 - 使用 JavaScript 选择所有 <li> 元素，并将它们的字体大小设置为 20px。
提示： - 使用 document.querySelectorAll() 方法选择元素。
4. 总结¶
在本章中，我们学习了如何使用 JavaScript 选择网页中的元素。以下是本主题的关键点：
document.getElementById()：通过id选择单个元素。document.getElementsByClassName()：通过class选择多个元素，返回一个 HTMLCollection。document.querySelector()和document.querySelectorAll()：使用 CSS 选择器选择元素，分别返回第一个匹配的元素和所有匹配的元素。
通过这些方法，我们可以轻松地访问和操作网页中的元素，从而实现动态的网页交互效果。在接下来的章节中，我们将学习如何进一步操作这些元素，例如修改它们的样式、属性和内容。
通过本章的学习，你应该已经掌握了如何使用 JavaScript 选择网页中的元素。接下来，你可以尝试完成练习题，以巩固所学知识。如果你有任何问题或需要进一步的帮助，请随时查阅相关文档或寻求社区支持。