JavaScript 中的 DOM 操作
第 7 天：JavaScript 中的 DOM 操作
日期：2024 年 12 月 14 日
歡迎來到 JavaScript 學習之旅的第七天！今天的主題重點是 DOM 操作，這是 JavaScript 最令人興奮的方面之一。透過 DOM 操作，您可以動態更新、新增或刪除網頁中的元素，使其具有互動性和使用者友善性。在今天的課程結束時，您還將創建一個簡單的待辦事項清單項目，將您的知識付諸實踐。
1.什麼是 DOM？
文件物件模型 (DOM) 是 Web 文件的程式設計介面。它將 HTML 文件的結構表示為物件樹，允許您使用 JavaScript 以程式設計方式存取和操作元素。
以下是 DOM 如何表示 HTML 的範例：
<html>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</body>
</html>
上面的 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：釋放按鍵時觸發。
範例：
<html>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</body>
</html>
5.項目：待辦事項清單
讓我們將您所學到的內容結合到一個簡單的待辦事項清單應用程式中。
HTML 結構
Document
└── html
└── body
├── h1
└── p
如何運作
- 使用者在輸入欄位中鍵入任務。
- 點選「新增任務」會建立一個新的
- 元素與任務。
- 每個任務都有一個「刪除」按鈕來刪除它。
6.要點
- DOM Access：使用 getElementById 和 querySelector 等方法。
- DOM 修改：動態變更內容、樣式和類別。
- 事件處理：使用 addEventListener 讓頁面具有互動性。
- 練習項目：建立待辦事項清單來鞏固您的知識。
第 7 天的練習任務
- 將「標記為完成」功能新增至您的待辦事項清單。
- 建立一個購物清單應用程序，使用者可以在其中輸入商品及其數量。
- 在一個小專案中試驗滑鼠懸停和按鍵等事件類型。
後續步驟
明天，第 8 天，我們將探索錯誤處理與除錯，學習如何處理 JavaScript 程式碼中的意外問題。到時候見！
以上是JavaScript 中的 DOM 操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
JavaScript引擎：比較實施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
JavaScript：探索網絡語言的多功能性
Apr 11, 2025 am 12:01 AM
JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。
Python vs. JavaScript：學習曲線和易用性
Apr 16, 2025 am 12:12 AM
Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
如何使用Next.js（前端集成）構建多租戶SaaS應用程序
Apr 11, 2025 am 08:22 AM
本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫
從C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
使用Next.js（後端集成）構建多租戶SaaS應用程序
Apr 11, 2025 am 08:23 AM
我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。 首先，什麼是多租戶SaaS應用程序？ 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務
