JavaScript 核心知識體系總結：DOM 操作、事件機制與現代最佳實踐

DOM 元素查找與操作

三大查找 API 對比

元素內容與屬性操作

// 1. 內容操作
element.innerHTML = '新內容';      // 解析 HTML，有 XSS 風險
element.textContent = '純文本內容';            // 安全，不解析 HTML
element.value = '輸入框值';                    // 表單元素專用

// 2. 屬性操作
element.setAttribute('data-id', '100');        // 設置任意屬性
element.getAttribute('href');                  // 獲取屬性原始值
element.dataset.userId = '100';                // HTML5 data-* 屬性快捷訪問
element.removeAttribute('disabled');           // 移除屬性

// 3. 樣式操作
element.style.color = 'blue';                  // 行內樣式，高優先級
element.style.cssText = 'color:red;font-size:14px;'; // 批量設置
element.classList.add('active');               // 類名操作（推薦）
element.classList.toggle('hidden');            // 切換類名
element.classList.contains('disabled');        // 判斷類名

動態創建與插入節點

// 創建元素
const div = document.createElement('div');
div.className = 'card';
div.innerHTML = '
標題
內容
';

// 插入位置控制
parent.appendChild(div);                    // 末尾子節點
parent.insertBefore(div, referenceNode);    // 指定節點前
parent.prepend(div);                        // 首個子節點 (現代 API)
referenceNode.after(div);                   // 緊隨其後 (現代 API)

// 刪除
div.remove();                               // 現代 API
// 或 parent.removeChild(div);               // 傳統方式

事件機制深度解析

事件流三階段

1. 捕獲階段：window → document → html → body → 目標父級
2. 目標階段：到達目標元素
3. 冒泡階段：目標父級 → body → html → document → window

絕大多數事件（click, keydown 等）支持冒泡；focus, blur, load, unload 等不冒泡。

三種綁定方式對比

事件對象關鍵屬性/方法

element.addEventListener('click', function(event) {
    // 兼容寫法：event = event || window.event;
    
    event.type;           // 'click'
    event.target;         // 觸發事件的實際元素
    event.currentTarget;  // 綁定事件的元素 (=== this)
    event.clientX/Y;      // 相對視口座標
    event.pageX/Y;        // 相對文檔座標
    event.key;            // 按鍵值 (鍵盤事件)
    event.preventDefault(); // 阻止默認行為 (如表單提交、鏈接跳轉)
    event.stopPropagation(); // 阻止冒泡
    event.stopImmediatePropagation(); // 阻止同元素其他處理器執行
});

事件委托：高性能批量綁定

// 錯誤：為 1000 個 li 綁定點擊 → 內存/性能差
// document.querySelectorAll('li').forEach(li => li.onclick = fn);

// 正確：委托給父級 ul
document.getElementById('list').addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        console.log('點擊了:', e.target.textContent);
    }
});

常見事件分類速查

• 鼠標：click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave (後兩者不冒泡)
• 鍵盤：keydown, keyup, keypress (棄用)
• 表單：submit, change, input, focus, blur, select
• 窗口/文檔：load, DOMContentLoaded, resize, scroll, hashchange, beforeunload
• 觸摸/指針：touchstart, touchmove, touchend / pointerdown, pointermove, pointerup (統一鼠標觸摸)

現代 JavaScript 最佳實踐

模塊化與作用域

// ES Modules (瀏覽器原生支持)
export const API_BASE = '/api/v1';
export function fetchUser(id) { return fetch(`${API_BASE}/users/${id}`).then(r => r.json()); }

// 導入
import { API_BASE, fetchUser } from './api.js';

// IIFE 兼容舊環境
const MyModule = (function() {
    const privateVar = 'secret';
    return { publicMethod() { console.log(privateVar); } };
})();

異步編程：Promise + async/await

// 並發請求
const [users, posts] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json())
]);

// 超時控制
const response = await Promise.race([
    fetch('/api/slow'),
    new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), 5000))
]);

// 錯誤邊界處理
try {
    const data = await fetchData();
} catch (err) {
    console.error('請求失敗:', err);
    showErrorUI(err.message);
}

性能優化清單

• 使用 requestAnimationFrame 做動畫，避免 setInterval
• 防抖：const debounced = debounce(fn, 300) (輸入框搜索)
• 節流：const throttled = throttle(fn, 100) (滾動/縮放監聽)
• 事件監聽器及時 removeEventListener，避免內存洩漏
• 大列表虛擬滾動、圖片懶加載 (loading="lazy")
• 避免強制同步佈局：讀寫分離，批量 DOM 操作用 DocumentFragment

安全防範

• XSS：永不信任用戶輸入，用 textContent 代替 innerHTML，CSP 標頭，輸出編碼
• CSRF：同源檢查、雙重 Cookie、SameSite Cookie、Token 驗證
• 點擊劫持：X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'

JavaScript 已從「頁面腳本」進化為「全棧應用語言」。掌握 DOM 本質、事件流機制、異步模式與工程化工具鏈，是構建健壯、高性能、可維護前端應用的基石。