优先用 querySelector/querySelectorAll 替代老式 DOM 查找方法，因其语法统一、返回值一致且支持复杂选择器；innerHTML 用于插入含标签结构，textContent 仅更新纯文本更安全高效；批量操作 DOM 应用 DocumentFragment 或 innerHTML 一次性挂载，避免循环触发重排。
直接用 document.querySelector 和 document.querySelectorAll 替代老式 getElementById / getElementsByClassName，绝大多数场景下更简洁、可读性更强，且支持复杂选择器。
为什么 querySelector 比 getElementById 更值得默认使用
不是因为它“高级”，而是它统一了查找逻辑：ID、类名、属性、伪类都能用同一套语法；而 getElementById 返回单个元素，getElementsByClassName 却返回 HTMLCollection（非数组），容易在调用 .forEach 时出错。
实操建议：
- 查单个元素优先写
document.querySelector('#my-id')，和getElementById性能几乎无差别，但语义更一致 - 查多个元素统一用
document.querySelectorAll('.item')，返回的是NodeList，可直接用.forEach、.map - 避免混用：比如用
getElementsByClassName获取后又转成数组——多此一举
innerHTML 和 textContent 到底该选哪个
关键看是否要解析 HTML 字符串。innerHTML 会触发 HTML 解析和 DOM 重建，有 XSS 风险且稍慢；textContent 只处理纯文本，安全、快、不触发重排。
立即学习“Java免费学习笔记（深入）”；
常见错误现象：
- 用
innerHTML渲染用户输入内容（如评论）→ 被执行恶意脚本 - 只更新文字却用了
innerHTML→ 多余的解析开销，还可能意外清空绑定的事件监听器
使用场景：
- 动态插入带标签的结构（如模版字符串生成的卡片）→ 用
innerHTML - 仅更新文案（如状态提示、计数器）→ 用
textContent
批量操作 DOM 时，为什么别直接循环 appendChild
每调用一次 appendChild 都可能触发浏览器重排（reflow），100 次操作 = 100 次潜在重排，性能断崖式下降。
实操建议：
- 用
DocumentFragment缓存所有新节点，最后一次性挂载：const frag = document.createDocumentFragment(); items.forEach(item => { const el = document.createElement('div'); el.textContent = item; frag.appendChild(el); }); container.appendChild(frag); - 现代替代方案：用
innerHTML批量写入字符串（前提是内容可信），或用insertAdjacentHTML定位插入 - 避免在循环中反复读取
offsetHeight、getBoundingClientRect()等触发重排的属性
真正影响性能的往往不是“怎么选 API”，而是“在什么时机、以什么粒度去触碰 DOM”。批量、延迟、缓存 —— 这三个词比任何单个方法名都重要。
