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中文網其他相關文章！