JavaScript WebAPI、DOM、事件與元素操作實例詳解

一、引言

JavaScript作為現代Web開發的核心語言，其強大的功能不僅體現在語法和邏輯處理上，更體現在與瀏覽器環境交互的能力上。WebAPI、DOM操作、事件處理和元素控制構成了JavaScript前端開發的四大支柱。本文將通過實例詳細解析這些關鍵技術，幫助開發者掌握構建動態網頁應用的核心技能。

二、WebAPI：瀏覽器功能的橋梁

1. 什么是WebAPI

WebAPI（Web Application Programming Interface）是一組由瀏覽器提供的接口，允許JavaScript代碼與瀏覽器環境進行交互。這些API涵蓋了從簡單的定時器到復雜的圖形渲染等各個方面。

2. 常用WebAPI實例

`javascript // 定時器API const timerId = setTimeout(() => { console.log('延遲執行'); }, 2000);

// 清除定時器
clearTimeout(timerId);

// 地理位置API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(緯度: ${position.coords.latitude});
console.log(經度: ${position.coords.longitude});
},
(error) => {
console.error('獲取位置失敗:', error.message);
}
);
}
`

三、DOM：文檔對象模型

1. DOM基礎概念

DOM（Document Object Model）是將HTML文檔表示為樹狀結構的對象模型，JavaScript可以通過DOM API訪問和操作網頁內容。

2. DOM操作實例

`javascript // 獲取元素 const header = document.getElementById('main-header'); const paragraphs = document.getElementsByClassName('content'); const firstDiv = document.querySelector('div.container'); const allLinks = document.querySelectorAll('a');

// 創建新元素
const newParagraph = document.createElement('p');
newParagraph.textContent = '這是新創建的段落';
newParagraph.className = 'highlight';

// 添加元素到DOM
const container = document.querySelector('.container');
container.appendChild(newParagraph);

// 修改元素屬性
const image = document.querySelector('img.logo');
image.setAttribute('alt', '網站標志');
image.src = 'new-logo.png';

// 樣式操作
const element = document.getElementById('myElement');
element.style.color = '#ff0000';
element.style.fontSize = '18px';

// 類名操作
element.classList.add('active', 'highlight');
element.classList.remove('inactive');
element.classList.toggle('visible');
`

四、事件處理：用戶交互的核心

1. 事件基礎

事件是用戶在網頁上執行的操作（如點擊、滾動、輸入等），JavaScript通過事件監聽器來響應這些操作。

2. 事件處理實例

`javascript // 添加事件監聽器 const button = document.getElementById('submit-btn'); button.addEventListener('click', function(event) { event.preventDefault(); // 阻止默認行為 console.log('按鈕被點擊了!'); console.log('事件類型:', event.type); console.log('目標元素:', event.target); });

// 鍵盤事件
document.addEventListener('keydown', (event) => {
console.log(按鍵: ${event.key}, 鍵碼: ${event.keyCode});
if (event.key === 'Escape') {
console.log('ESC鍵被按下');
}
});

// 鼠標事件
const box = document.querySelector('.interactive-box');
box.addEventListener('mouseenter', () => {
box.style.backgroundColor = '#e0f7fa';
});

box.addEventListener('mouseleave', () => {
box.style.backgroundColor = '#ffffff';
});

// 表單事件
const form = document.getElementById('user-form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(form);
const username = formData.get('username');
console.log(用戶名: ${username});
});

// 事件委托
const list = document.getElementById('item-list');
list.addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
console.log(點擊了項目: ${event.target.textContent});
}
});
`

五、綜合實例：動態任務列表

以下是一個綜合運用DOM操作和事件處理的完整示例：

`javascript // HTML結構參考 /*

任務列表

// JavaScript代碼
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');

// 添加任務函數
function addTask() {
const taskText = taskInput.value.trim();

if (taskText === '') {
alert('請輸入任務內容');
return;
}

// 創建新任務項
const taskItem = document.createElement('li');
taskItem.className = 'task-item';

// 創建任務文本
const textSpan = document.createElement('span');
textSpan.textContent = taskText;

// 創建刪除按鈕
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '刪除';
deleteBtn.className = 'delete-btn';

// 組裝元素
taskItem.appendChild(textSpan);
taskItem.appendChild(deleteBtn);
taskList.appendChild(taskItem);

// 清空輸入框
taskInput.value = '';
taskInput.focus();
}

// 刪除任務函數
function deleteTask(event) {
if (event.target.classList.contains('delete-btn')) {
const taskItem = event.target.parentElement;
taskList.removeChild(taskItem);
}
}

// 標記任務完成
function toggleTaskCompletion(event) {
if (event.target.tagName === 'SPAN') {
event.target.classList.toggle('completed');
}
}

// 事件監聽
addBtn.addEventListener('click', addTask);

taskInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
addTask();
}
});

taskList.addEventListener('click', (event) => {
deleteTask(event);
toggleTaskCompletion(event);
});

// 初始示例任務
const initialTasks = ['學習JavaScript', '完成項目作業', '復習DOM操作'];
initialTasks.forEach(task => {
taskInput.value = task;
addTask();
});
`