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

news2025/2/15 15:11:12

本文系统介绍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);