百度如何网站,wordpress图片备用地址,wordpress删除评论框,小型电子商务网站网页设计本文系统介绍DOM相关的22个核心概念#xff0c;每个知识点均提供代码示例及简要说明#xff0c;帮助开发者全面掌握DOM操作技巧。 一、DOM基础概念
1. DOM概念
DOM#xff08;Document Object Model#xff09;是HTML/XML的编程接口#xff0c;通过JavaScript可动态修改…本文系统介绍DOM相关的22个核心概念每个知识点均提供代码示例及简要说明帮助开发者全面掌握DOM操作技巧。 一、DOM基础概念
1. DOM概念
DOMDocument Object Model是HTML/XML的编程接口通过JavaScript可动态修改页面内容。
const element document.getElementById(myElement);
element.textContent Hello DOM!;2. 虚拟DOM
虚拟DOM是真实DOM的轻量级表示用于优化渲染性能如React。
// React组件示例
function App() {return divVirtual 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应用的流畅性与用户体验。
