日期:2024 年 12 月 14 日
歡迎來到 JavaScript 學習之旅的第七天!今天的主題重點是 DOM 操作,這是 JavaScript 最令人興奮的方面之一。透過 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
您可以使用多種方法存取 DOM 中的元素:
let title = document.getElementById("title"); console.log(title); // Logs the element with ID "title"
let items = document.getElementsByClassName("item"); console.log(items); // Logs all elements with class "item"
let firstItem = document.querySelector(".item"); // First element with class "item" let allItems = document.querySelectorAll(".item"); // All elements with class "item"
您可以使用以下方法更新元素內的文字或 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
事件可以讓您的網頁具有互動性。以下是一些常見的事件類型以及如何處理它們。
在您的 HTML 中:
<button onclick="alert('Button Clicked!')">Click Me</button>
這種方法是首選,因為它將 JavaScript 與 HTML 分開。
let button = document.getElementById("btn"); button.addEventListener("click", function () { alert("Button Clicked!"); });
範例:
<html> <body> <h1>Welcome</h1> <p>This is a paragraph.</p> </body> </html>
讓我們將您所學到的內容結合到一個簡單的待辦事項清單應用程式中。
Document └── html └── body ├── h1 └── p
明天,第 8 天,我們將探索錯誤處理與除錯,學習如何處理 JavaScript 程式碼中的意外問題。到時候見!
以上是JavaScript 中的 DOM 操作的詳細內容。更多資訊請關注PHP中文網其他相關文章!