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