JavaScript 中的 DOM 操作

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

1.什么是 DOM？

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

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

  
    
Welcome
    
This is a paragraph.
  

上述的 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：

let title = document.getElementById("title");
title.innerText = "Updated Title"; // Changes visible text
title.innerHTML = "Updated Title"; // 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 中：

Click Me

使用 addEventListener

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

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

常见事件

**例子：**

let inputField = document.getElementById("input");
inputField.addEventListener("keyup", function (event) {
  console.log(`You typed: ${event.target.value}`);
});

5. 项目：待办事项清单

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

HTML 结构

  
  
  


  
To-Do List
  
  Add Task
  

  

JavaScript 代码

// Access elements
let taskInput = document.getElementById("taskInput");
let addTaskBtn = document.getElementById("addTaskBtn");
let taskList = document.getElementById("taskList");

// Add event listener to the button
addTaskBtn.addEventListener("click", function () {
  let task = taskInput.value; // Get the input value
  if (task.trim() !== "") {
    // Create a new list item
    let listItem = document.createElement("li");
    listItem.innerText = task;

    // Add a delete button
    let deleteBtn = document.createElement("button");
    deleteBtn.innerText = "Delete";
    deleteBtn.addEventListener("click", function () {
      taskList.removeChild(listItem);
    });

    listItem.appendChild(deleteBtn); // Add delete button to the list item
    taskList.appendChild(listItem); // Add the list item to the task list
    taskInput.value = ""; // Clear the input field
  } else {
    alert("Please enter a task!");
  }
});

工作原理

6. 关键要点

第 7 天的练习任务

下一步