如何用Javascript操作DOM_有哪些高效的Javascript DOM操作最佳实践？

优先用 createElement + appendChild 或 DocumentFragment 批量操作，避免 innerHTML 的安全与性能问题；有 ID 时用 getElementById；事件绑定始终用 addEventListener 并注意委托与清理；避免强制同步布局，读写分离并善用 transform。

直接修改 innerHTML 还是用 createElement？

多数情况下，innerHTML 看似快捷，但存在安全风险和性能隐患：它会销毁并重建整个子树，触发重排（reflow）和重绘（repaint），还会丢弃已绑定的事件监听器。而 document.createElement + appendChild 虽然代码略多，但更可控、可复用，且不会意外清空已有状态。

• 动态插入大量结构化内容（如列表项）时，优先用 DocumentFragment 批量操作，再一次性挂载，避免多次重排
• 仅更新文本内容时，用 textContent 替代 innerHTML，既防 XSS 又更快
• 若必须用 innerHTML（例如渲染富文本），务必先对字符串做严格转义，或使用 DOMPurify.sanitize()

querySelector 和 getElementById 哪个更快？

getElementById 是 DOM API 中最快的查找方式，因为它走的是底层 ID 索引，时间复杂度接近 O(1)；而 querySelector 需要解析 CSS 选择器并遍历匹配，即使只查 #id，也比 getElementById 慢 2–5 倍（实测 Chromium 下）。

• 有明确 ID 时，无条件用 document.getElementById('myId')
• querySelector 适合复杂定位（如 article > .content:first-child），但避免在循环中反复调用——缓存结果
• 批量查找同类元素（如所有按钮），querySelectorAll 返回静态 NodeList，比 getElementsByClassName 的实时 HTMLCollection 更稳定

事件绑定该用 addEventListener 还是 onclick 属性？

永远用 addEventListener。直接赋值 element.onclick = handler 会覆盖之前绑定的监听器，且无法控制捕获/冒泡阶段，也不支持选项（如 { once: true, passive: true }）。

• 高频触发事件（如 scroll、mousemove）务必加节流或防抖，或启用 { passive: true } 提升滚动流畅度
• 为动态插入的节点绑定事件时，优先用事件委托：在父级监听，用 event.target.matches('.btn') 判断来源
• 组件卸载前记得调用 removeEventListener，否则可能引发内存泄漏（尤其 React/Vue 等框架外的手动管理场景）

频繁读写 offsetTop、clientWidth 会拖慢页面吗？

会，而且很严重。这类属性属于“强制同步布局”（Forced Synchronous Layout），浏览器必须立即计算当前样式和布局，打断渲染流水线，造成卡顿。尤其在动画循环（如 requestAnimationFrame）中反复读写，性能雪崩。

• 把读操作集中到一起（如先批量读取所有 offsetTop，再统一写入 style.left），避免“读-写-读-写”交错
• 用 getBoundingClientRect() 替代多个偏移属性组合，它只触发一次布局计算
• 纯视觉位移优先用 transform 和 opacity，它们由合成器线程处理，不触发布局和绘制

const el = document.getElementById('box');
// ❌ 危险：两次强制布局
console.log(el.offsetTop);
el.style.left = '100px';
console.log(el.clientWidth); // 再次强制布局

// ✅ 安全：读完再写
const rect = el.getBoundingClientRect();
el.style.transform = `translateX(${rect.left + 10}px)`;

DOM 操作本身不难，难的是判断什么时候该批处理、什么时候该避让、什么时候该交还给 CSS。很多性能问题不是出在“没写对”，而是出在“没想清楚浏览器正在做什么”。