本文系統介紹DOM相關的22個核心概念，每個知識點均提供代碼示例及簡要說明，幫助開發者全面掌握DOM操作技巧。
一、DOM基礎概念
1. DOM概念
DOM（Document Object Model）是HTML/XML的編程接口，通過JavaScript可動態修改頁面內容。
const element = document.getElementById("myElement");
element.textContent = "Hello DOM!";
2. 虛擬DOM
虛擬DOM是真實DOM的輕量級表示，用于優化渲染性能（如React）。
// React組件示例
function App() {return <div>Virtual DOM</div>;
}
3. 對象與標簽
DOM元素是JavaScript對象，可通過API操作標簽屬性。
const img = document.createElement("img");
img.src = "logo.png";
document.body.appendChild(img);
4. 定時器
使用setTimeout和setInterval控制代碼執行時機。
setTimeout(() => {console.log("延遲1秒執行");
}, 1000);
5. 代理/分流（事件委托）
通過父元素代理子元素的事件處理。
document.getElementById("list").addEventListener("click", (e) => {if (e.target.tagName === "LI") {console.log("點擊了列表項:", e.target.textContent);}
});
6. 事件降頻（防抖與節流）
限制高頻事件觸發次數。
// 防抖
function debounce(func, delay) {let timeout;return (...args) => {clearTimeout(timeout);timeout = setTimeout(() => func.apply(this, args), delay);};
}
window.addEventListener("resize", debounce(() => console.log("窗口調整"), 200));
7. 物理模擬
實現簡單動畫效果，如元素下落。
let pos = 0;
const ball = document.getElementById("ball");
function animate() {pos += 5;ball.style.top = pos + "px";if (pos < 300) requestAnimationFrame(animate);
}
animate();
8. 重繪/重排
修改DOM屬性觸發瀏覽器重新渲染。
// 觸發重排（修改布局）
element.style.width = "200px";
// 觸發重繪（修改顏色）
element.style.backgroundColor = "red";
二、節點與事件
9. 節點與遍歷樹
遍歷DOM樹結構。
const children = document.body.childNodes;
children.forEach(child => console.log(child.nodeName));
10. 節點增刪改查
動態操作節點。
const newDiv = document.createElement("div");
document.body.appendChild(newDiv);
document.body.removeChild(newDiv);
11. Event事件
綁定點擊事件。
button.addEventListener("click", () => alert("按鈕被點擊"));
12. 監聽器
添加和移除事件監聽。
const handler = () => console.log("事件觸發");
element.addEventListener("mouseover", handler);
element.removeEventListener("mouseover", handler);
13. 事件冒泡
阻止事件冒泡。
childElement.addEventListener("click", (e) => {e.stopPropagation();
});
14. 行為鎖
防止重復提交（如按鈕點擊）。
let isLocked = false;
button.addEventListener("click", () => {if (isLocked) return;isLocked = true;// 執行操作setTimeout(() => isLocked = false, 1000);
});
15. 碰撞檢測
檢測兩個元素是否重疊。
function isColliding(el1, el2) {const rect1 = el1.getBoundingClientRect();const rect2 = el2.getBoundingClientRect();return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
}
三、GUI與交互
16. GUI渲染行為
使用requestAnimationFrame優化動畫。
function animate() {element.style.left = (pos += 2) + "px";requestAnimationFrame(animate);
}
animate();
17. 位置與偏移
獲取元素位置信息。
const offsetTop = element.offsetTop;
const offsetLeft = element.offsetLeft;
18. 鼠標/鍵盤事件
監聽用戶輸入。
document.addEventListener("mousemove", (e) => {console.log(`鼠標位置：${e.clientX}, ${e.clientY}`);
});
document.addEventListener("keydown", (e) => {console.log("按下按鍵:", e.key);
});
19. 事件委托
動態子元素的事件處理。
document.querySelector(".container").addEventListener("click", (e) => {if (e.target.classList.contains("item")) {console.log("點擊了子元素");}
});
20. 默認行為
阻止表單默認提交。
form.addEventListener("submit", (e) => {e.preventDefault();// 自定義提交邏輯
});
21. 運動框架
實現平滑動畫。
function moveElement(element, targetPos, duration) {const startPos = parseInt(element.style.left) || 0;const distance = targetPos - startPos;let startTime = null;function step(timestamp) {if (!startTime) startTime = timestamp;const progress = timestamp - startTime;element.style.left = startPos + (distance * Math.min(progress/duration, 1)) + "px";if (progress < duration) requestAnimationFrame(step);}requestAnimationFrame(step);
}
22. 拖拽模組
實現元素拖拽功能。
let isDragging = false;
element.addEventListener("mousedown", () => isDragging = true);
document.addEventListener("mousemove", (e) => {if (!isDragging) return;element.style.left = e.clientX + "px";element.style.top = e.clientY + "px";
});
document.addEventListener("mouseup", () => isDragging = false);
總結
DOM是前端開發的核心，涵蓋節點操作、事件處理、動畫優化等關鍵領域。掌握這些知識點后，開發者可以更高效地實現復雜交互，并通過虛擬DOM、事件委托、防抖節流等技術優化性能。建議結合具體場景深入實踐，以提升Web應用的流暢性與用戶體驗。
)
