最稳妥获取元素用 getElementById（唯一ID）或 querySelector（CSS选择器，首匹配）；更新文本优先 textContent，结构用 innerHTML；动态内容需确保元素存在；批量操作用 DocumentFragment 避免重排。
用
和
获取元素最稳妥
别一上来就用
或遍历
，容易拿错节点或触发重排。优先选语义明确、
浏览器
兼容性好的方法：
适合单个唯一 ID；
支持 CSS 选择器，灵活但注意返回的是第一个匹配项（要多个用
）。
常见错误：ID 带点或井号——
正确，
或
都会查不到（除非你真用了 class）。
动态内容更新前，务必先确认元素存在，否则调
或
会报
如果元素是异步插入（比如通过
后渲染），别在 DOM 加载完就立刻查，加个
或监听自定义事件更可靠
比
略快，纯 ID 查找场景下优先它
更新文本用
，更新结构用
只改文字内容，不解析 HTML，安全且快；
会重新解析字符串为 DOM 节点，能插入标签但有 XSS 风险，且频繁使用会引发重排
重绘
。
比如想把
更新为「加载完成」：
就够了；但如果要加个
标签，才用
。
立即学习
“
Java免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
拼接 HTML 字符串时，手动转义用户输入的
、
、
，或用
（需引入库）
避免在循环里反复赋值
，一次拼好再写入，否则每轮都触发渲染
想清空容器？
比
更彻底（后者不清除子元素的事件监听器）
批量更新用
避免卡顿
一次性插入几十个
到
里？直接循环
会让浏览器反复重排。用
先离屏组装，再整体挂载。
不在真实 DOM 树中，操作它不触发渲染
现代框架（如 React）内部也这么干，但手写 DOM 操作时容易忽略这点
如果只是增删单个节点，
/
直接用没问题，不用过度封装
监听 DOM 变化用
，别用
是标准方案，性能可控；老式事件
已废弃，触发太频繁，Chrome 早就不支持了。
典型场景：第三方脚本动态加广告 div，你想等它出现后立即隐藏——不能靠轮询
查 DOM，用
监听
更准更快。
记得调用
，否则观察器持续占用内存
监听范围尽量缩小：只观察目标父容器，别用
全局监听
回调里处理逻辑要轻量，避免在
中又触发大量 DOM 写操作
DOM 操作看着简单，真正卡顿、错乱、内存泄漏，往往出在“查到就改”“循环就插”“变了就刷”这种直觉写法上。留心节点是否存在、更新是否必要、批量是否合并、监听是否回收——这些细节比语法本身更影响实际效果。
querySelectorgetElementByIddocument.allchildNodesgetElementByIdquerySelectorquerySelectorAllquerySelector("#my-id")querySelector("my-id")querySelector(".my-id")innerHTMLtextContentCannot set property 'xxx' of nullfetchsetTimeoutgetElementByIdquerySelectortextContentinnerHTMLtextContentinnerHTMLdocument.getElementById("msg").textContent = "加载完成"innerHTML<>&DOMPurify.sanitize()innerHTMLel.innerHTML = ""el.textContent = ""DocumentFragmentliulappendChildDocumentFragmentconst frag = document.createDocumentFragment();
for (let i = 0; i < 50; i++) {
const li = document.createElement("li");
li.textContent = `Item ${i}`;
frag.appendChild(li);
}
document.getElementById("myList").appendChild(frag);DocumentFragmentappendChildremoveChildMutationObserverDOMSubtreeModifiedMutationObserverDOMSubtreeModifiedsetIntervalMutationObserverchildListobserver.disconnect()document.bodycallback