深入理解DOM：22个核心知识点与代码示例

本文系统介绍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应用的流畅性与用户体验。