JavaScript 中的 DOM 操作

第 7 天：JavaScript 中的 DOM 操作

日期：2024 年 12 月 14 日

欢迎来到 JavaScript 学习之旅的第七天！今天的主题重点是 DOM 操作，这是 JavaScript 最令人兴奋的方面之一。通过 DOM 操作，您可以动态更新、添加或删除网页中的元素，使其具有交互性和用户友好性。在今天的课程结束时，您还将创建一个简单的待办事项列表项目，将您的知识付诸实践。

---

1.什么是 DOM？

文档对象模型 (DOM) 是 Web 文档的编程接口。它将 HTML 文档的结构表示为对象树，允许您使用 JavaScript 以编程方式访问和操作元素。

以下是 DOM 如何表示 HTML 的示例：

  
    <h1 id="Welcome">Welcome</h1>
    <p>This is a paragraph.</p>
  

上面的 DOM 树看起来像这样：

Document
 └── html
      └── body
           ├── h1
           └── p

---

2.访问 DOM 元素

您可以使用多种方法访问 DOM 中的元素：

使用 getElementById

let title = document.getElementById("title");
console.log(title); // Logs the element with ID "title"

使用 getElementsByClassName

let items = document.getElementsByClassName("item");
console.log(items); // Logs all elements with class "item"

使用 querySelector 和 querySelectorAll

let firstItem = document.querySelector(".item"); // First element with class "item"
let allItems = document.querySelectorAll(".item"); // All elements with class "item"

---

3.修改 DOM 元素

更改内容

您可以使用以下方法更新元素内的文本或 HTML：

• innerText：更新可见文本。
• innerHTML：更新 HTML 内容。

let title = document.getElementById("title");
title.innerText = "Updated Title"; // Changes visible text
title.innerHTML = "<strong>Updated Title</strong>"; // Adds HTML formatting

改变风格

可以直接修改元素的CSS样式。

let title = document.getElementById("title");
title.style.color = "blue";
title.style.fontSize = "24px";

添加或删除课程

let box = document.getElementById("box");
box.classList.add("highlight");  // Adds a class
box.classList.remove("highlight"); // Removes a class

---

4.处理事件

事件可以让您的网页具有互动性。以下是一些常见的事件类型以及如何处理它们。

内联事件处理

在您的 HTML 中：

<button onclick="alert('Button Clicked!')">Click Me</button>

使用addEventListener

这种方法是首选，因为它将 JavaScript 与 HTML 分开。

let button = document.getElementById("btn");
button.addEventListener("click", function () {
  alert("Button Clicked!");
});

常见事件

• click：单击元素时触发。
• mouseover：当鼠标悬停在元素上时触发。
• keyup：释放按键时触发。

示例：

  
    <h1 id="Welcome">Welcome</h1>
    <p>This is a paragraph.</p>
  

---

5.项目：待办事项列表

让我们将您所学到的内容结合到一个简单的待办事项列表应用程序中。

HTML 结构

Document
 └── html
      └── body
           ├── h1
           └── p

如何运作

1. 用户在输入字段中键入任务。
2. 单击“添加任务”会创建一个新的
3. 元素与任务。
4. 每个任务都有一个“删除”按钮来删除它。

---

6.要点

1. DOM Access：使用 getElementById 和 querySelector 等方法。
2. DOM 修改：动态更改内容、样式和类。
3. 事件处理：使用 addEventListener 使页面具有交互性。
4. 练习项目：建立一个待办事项列表来巩固您的知识。

---

第 7 天的练习任务

1. 将“标记为完成”功能添加到您的待办事项列表中。
2. 创建一个购物清单应用程序，用户可以在其中输入商品及其数量。
3. 在一个小项目中试验鼠标悬停和按键等事件类型。

---

后续步骤

明天，第 8 天，我们将探索错误处理和调试，学习如何处理 JavaScript 代码中的意外问题。到时候见！

以上是JavaScript 中的 DOM 操作的详细内容。更多信息请关注PHP中文网其他相关文章！