应优先使用 queryselector/queryselectorall 替代 getelementbyid/getelementsbyclassname，因其基于统一css引擎、避免id大小写错误与动态class问题，返回静态nodelist可缓存复用，并推荐通过语义化data属性（如data-role）精准定位，减少dom查询次数。
用 querySelector 替代 getElementById 和 getElementsByClassName
多数人以为 ID 最快，其实现代浏览器中 querySelector 在多数场景下性能持平甚至更优——它背后是统一的 CSS 选择器引擎，且避免了 ID 大小写错误、重复 ID 或动态 ID（如 Vue/React 生成的 data-v-xxxx）导致的 getElementById 返回 null。类名查询同理：getElementsByClassName 返回的是实时更新的 HTMLCollection，每次访问 .length 或遍历都会触发 DOM 检查；而 querySelectorAll('.item') 返回静态 NodeList，可安全缓存、转数组、链式调用。
常见错误现象：document.getElementsByClassName('btn')[0].addEventListener 在循环中反复调用，结果绑定失败——因为每次取 [0] 都重新查一遍实时集合，中间若 DOM 变动（比如某处删了个元素），索引就偏了。
- 优先写
document.querySelector('[data-role="submit-btn"]')，比依赖 ID 或 class 更稳定 - 要批量操作时，用
const buttons = document.querySelectorAll('button[data-action]')，之后直接buttons.forEach(...) - 别在循环里反复调用
querySelector；查一次，存变量，复用
给自定义元素加语义化 data- 属性而非硬编码 class 或 ID
组件化开发中，class 名常被 CSS-in-JS、CSS Modules 或框架自动哈希（如 Button__root___1x2y3），ID 更难保证唯一和可预测。此时靠 data-testid、data-role、data-section 这类自定义属性定位，既不干扰样式，又规避了 class 名冲突或动态生成带来的不确定性。
使用场景：E2E 测试（Playwright/Cypress）、无障碍标注、模块内 DOM 路由（如微前端子应用只操作自己区域）。
- 写 HTML 时主动加：
<input data-role="search-input" data-section="header"> - JS 中查：
document.querySelector('[data-role="search-input"][data-section="header"]') - 避免用
data-test-id="save-btn-1"这种带序号的——序号一变就断，应抽象为行为语义，如data-action="save"
避免在事件回调里重复查 DOM，尤其在事件委托中
事件委托本身是为了减少绑定数量，但如果每次 click 回调里都 querySelector 一堆目标节点，就白委托了。典型反模式：list.addEventListener('click', e => { if (e.target.matches('.delete-btn')) { const item = e.target.closest('.list-item'); const id = item.querySelector('[data-id]').dataset.id; /* ... */ } })——这里每点一次都执行两次查询。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
更高效的做法是把关键信息“提上来”：在渲染列表项时，把 ID 直接塞进按钮的 data-id，点击时直接读，不用向上找、再向下钻。
- 渲染时写：
<button data-action="delete" data-item-id="123">删除</button> - 事件里直接用：
e.target.dataset.itemId，零 DOM 查询 - 需要父级上下文？用
e.target.closest('[data-list-id]')一次到位，别parentNode.parentNode...硬爬
DocumentFragment 不是银弹，但批量插入必须用它或字符串拼接
很多人知道 DocumentFragment，却在简单场景滥用。它真正起效的前提是：你要插入 **多个独立节点**，且这些节点 **没有共享父容器**。如果只是往一个 <ul></ul> 里加 10 个 <li>，直接拼字符串 + innerHTML 更快——V8 和 Blink 对 HTML 字符串解析做了深度优化，比 JS 层创建 10 次 createElement + appendChild 开销小得多。
容易踩的坑：fragment.appendChild(li) 循环 100 次，看似没直接操作真实 DOM，但 fragment 本身也是 DOM 节点，每次 appendChild 仍有开销；不如先建数组，最后 fragment.append(...liArray)（ES2024+）或用字符串。
- 少量节点（≤5）：直接
el.append(...nodes) - 大量同构节点（如列表）：用模板字符串累积，最后
container.innerHTML = htmlString - 异构复杂结构（含事件、状态）：才上
DocumentFragment+cloneNode或template.content.cloneNode(true)
最常被忽略的一点：DOM 查询效率从来不是孤立问题——它和你何时查、查完怎么用、是否缓存引用强相关。写 querySelector 很容易，但把它放在 scroll 或 input 事件里反复执行，再快的查询也扛不住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
