querySelectorAll 更适合批量更新，它返回静态 NodeList，可一次性获取多元素避免重复查询；但需转为数组才能安全使用 map/forEach，动态监听应改用 MutationObserver。
querySelector 和 querySelectorAll 哪个更适合批量更新？
querySelector 只返回第一个匹配元素，querySelectorAll 返回 NodeList（类数组，但不是 Array），适合批量操作。但注意：它返回的是静态快照，后续 DOM 变更不会影响已获取的列表。
- 如果要反复读取/更新同一组元素，用
querySelectorAll一次获取，避免重复查询 - 不要对
querySelectorAll结果直接调用map或forEach—— 虽然现代浏览器支持，但 IE 不支持，稳妥写法是[...document.querySelectorAll(...)].forEach(...)或Array.from(...).forEach(...) - 若需响应式监听（比如元素动态增删），应改用
MutationObserver，而非反复轮询querySelectorAll
innerHTML vs textContent：更新文本内容时选谁？
textContent 只设置纯文本，不解析 HTML，速度快、无 XSS 风险；innerHTML 会解析并重建子节点，开销大，且若插入不可信内容极易触发 XSS。
- 更新纯文字（如标题、提示语）：一律用
textContent - 插入结构化 HTML（如带
的富文本）：必须用innerHTML，但务必先做转义（例如用DOMPurify.sanitize()或手动替换>） - 避免在循环中频繁赋值
innerHTML—— 每次赋值都会触发重排重绘，应拼接好完整字符串再一次性写入
遍历大量 DOM 元素时如何避免卡顿？
直接用 for 循环遍历 NodeList 或 HTMLCollection 是最快的，但若元素数超千级，同步遍历仍可能阻塞主线程。
- 优先用
document.getElementById或document.getElementsByClassName（返回HTMLCollection，实时更新，但多数场景下不如querySelectorAll可控） - 对超 1000 个元素的遍历，考虑分片执行：
setTimeout或requestIdleCallback切割任务，防止页面冻结 - 避免在循环中反复访问
element.style或offsetHeight等触发回流的属性；如需多次读取，先缓存值
removeChild 和 remove：删除元素时该用哪个？
remove() 是现代标准方法，简洁安全：el.remove()；removeChild 需要先拿到父节点：el.parentNode.removeChild(el)，冗余且易因父节点为 null 报错。
立即学习“Java免费学习笔记（深入）”；
- 所有主流浏览器（包括 Edge 17+、Chrome 29+、Firefox 23+）均已支持
remove() - 若需兼容 IE，必须用
removeChild，但建议加保护：if (el.parentNode) el.parentNode.removeChild(el);
- 删除前无需检查
el.parentNode是否存在 ——remove()本身是幂等的，即使已脱离 DOM 也无副作用
真实项目里最常被忽略的是：用 querySelectorAll 获取元素后，在循环中又对每个元素调用 querySelector 查找子节点 —— 这会让性能呈平方级下降。应该把子选择器逻辑前置或复用。
