在現代網頁開發中，JavaScript 是不可或缺的一部分，它賦予了我們對網頁 DOM（文件物件模型）元素進行操作的能力。無論您是一位前端開發者還是只是對網頁開發感興趣的人，了解如何使用 JavaScript 操作 DOM 元素都是至關重要的。在本文中，我們將探討一些基本的技巧和實用的程式碼範例，以幫助您更好地掌握這個主題。
什麼是 DOM？
首先，讓我們簡要回顧一下 DOM 是什麼。DOM 是一個表示網頁結構的樹狀結構，它由各種元素組成，如標題、段落、圖像等。每個 HTML 元素都是 DOM 中的一個節點，我們可以使用 JavaScript 來訪問這些節點，並進行操作。以下是一些常見的 DOM 操作技巧：
選擇 DOM 元素
在開始操作 DOM 元素之前，我們需要知道如何選擇它們。您可以使用 document.querySelector 或 document.querySelectorAll 方法來選擇元素。以下是一個範例：
// 選擇單個元素
const header = document.querySelector('h1');
// 選擇多個元素
const paragraphs = document.querySelectorAll('p');修改元素的內容
您可以使用 JavaScript 輕鬆修改元素的內容，這在動態更新網頁內容時非常有用。以下是一個例子：
// 選擇一個元素
const header = document.querySelector('h1');
// 修改元素的文字內容
header.textContent = '新的標題';添加和移除 CSS 類
通過操作元素的 CSS 類，您可以實現風格變更和動畫效果。以下是一個示例：
// 選擇一個元素
const element = document.querySelector('.my-element');
// 添加 CSS 類
element.classList.add('active');
// 移除 CSS 類
element.classList.remove('active');監聽事件
事件處理是前端開發中的關鍵部分。您可以使用 addEventListener 方法來監聽 DOM 元素上的事件，例如點擊、滑鼠移動等。以下是一個基本示例：
// 選擇一個按鈕元素
const button = document.querySelector('#my-button');
// 添加點擊事件監聽器
button.addEventListener('click', function() {
alert('按鈕被點擊了！');
});創建新的 DOM 元素
有時您需要在網頁中創建新的元素並將其添加到 DOM 中。以下是一個簡單的程式碼示例：
// 創建一個新的段落元素
const newParagraph = document.createElement('p');
// 設置段落內容
newParagraph.textContent = '這是一個新段落';
// 將段落添加到 body 中
document.body.appendChild(newParagraph);實際應用
讓我們通過一個實際的示例來演示這些技巧的應用。假設您有一個簡單的待辦事項列表，您可以使用 JavaScript 來添加、刪除和標記完成待辦事項。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待辦事項列表</title>
<style>
/* 簡單的 CSS 樣式 */
.completed {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>待辦事項列表</h1>
<ul id="todo-list">
<li>完成作業</li>
<li>購物</li>
<li>運動</li>
</ul>
<input type="text" id="new-task" placeholder="新增待辦事項">
<button id="add-button">新增</button>
<script>
// 選擇元素
const addButton = document.querySelector('#add-button');
const newTaskInput = document.querySelector('#new-task');
const todoList = document.querySelector('#todo-list');
// 添加新的待辦事項
addButton.addEventListener('click', function() {
const taskText = newTaskInput.value;
if (taskText) {
const newTask = document.createElement('li');
newTask.textContent = taskText;
todoList.appendChild(newTask);
newTaskInput.value = '';
}
});
// 標記完成或取消完成
todoList.addEventListener('click', function(event) {
const target = event.target;
if (target.tagName === 'LI') {
target.classList.toggle('completed');
}
});
</script>
</body>
</html>這個示例演示了如何使用 JavaScript 選擇元素、添加事件監聽器以及修改元素的內容和類。通過這些基本技巧，您可以開始在網頁上實現更多有趣和互動性的功能。
總結
JavaScript 是現代網頁開發的重要組成部分，它使我們能夠操作網頁 DOM 元素，實現動態和互動性。本文介紹了一些基本的 DOM 操作技巧，包括選擇元素、修改內容、添加和移除 CSS 類、監聽事件以及創建新的 DOM 元素。這些技巧是前端開發的基礎，希望它們能幫助您更好地理解和應用 JavaScript 於您的網頁專案中。不斷練習和探索，您將能夠建立更加豐富和交互的網頁應用程序。