巴南市政建设网站网站如何被百度快速收录
本文系统介绍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应用的流畅性与用户体验。