最稳妥获取元素用 getElementById（唯一ID）或 querySelector（CSS选择器，首匹配）；更新文本优先 textContent，结构用 innerHTML；动态内容需确保元素存在；批量操作用 DocumentFragment 避免重排。
用 querySelector 和 getElementById 获取元素最稳妥
别一上来就用 document.all 或遍历 childNodes，容易拿错节点或触发重排。优先选语义明确、浏览器兼容性好的方法：getElementById 适合单个唯一 ID；querySelector 支持 CSS 选择器，灵活但注意返回的是第一个匹配项（要多个用 querySelectorAll）。
常见错误：ID 带点或井号——querySelector("#my-id") 正确，querySelector("my-id") 或 querySelector(".my-id") 都会查不到（除非你真用了 class）。
- 动态内容更新前，务必先确认元素存在，否则调
innerHTML或textContent会报Cannot set property 'xxx' of null - 如果元素是异步插入（比如通过
fetch后渲染），别在 DOM 加载完就立刻查，加个setTimeout或监听自定义事件更可靠 -
getElementById比querySelector略快，纯 ID 查找场景下优先它
更新文本用 textContent，更新结构用 innerHTML
textContent 只改文字内容，不解析 HTML，安全且快；innerHTML 会重新解析字符串为 DOM 节点，能插入标签但有 XSS 风险，且频繁使用会引发重排重绘。
比如想把 <div id="msg"></div> 更新为「加载完成」：document.getElementById("msg").textContent = "加载完成" 就够了；但如果要加个 <strong></strong> 标签，才用 innerHTML。
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
立即学习“Java免费学习笔记（深入）”；
- 拼接 HTML 字符串时，手动转义用户输入的
、<code>>、&，或用DOMPurify.sanitize()（需引入库） - 避免在循环里反复赋值
innerHTML，一次拼好再写入，否则每轮都触发渲染 - 想清空容器？
el.innerHTML = ""比el.textContent = ""更彻底（后者不清除子元素的事件监听器）
批量更新用 DocumentFragment 避免卡顿
一次性插入几十个 li 到 ul 里？直接循环 appendChild 会让浏览器反复重排。用 DocumentFragment 先离屏组装，再整体挂载。
const 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);
-
DocumentFragment不在真实 DOM 树中，操作它不触发渲染 - 现代框架（如 React）内部也这么干，但手写 DOM 操作时容易忽略这点
- 如果只是增删单个节点，
appendChild/removeChild直接用没问题，不用过度封装
监听 DOM 变化用 MutationObserver，别用 DOMSubtreeModified
MutationObserver 是标准方案，性能可控；老式事件 DOMSubtreeModified 已废弃，触发太频繁，Chrome 早就不支持了。
典型场景：第三方脚本动态加广告 div，你想等它出现后立即隐藏——不能靠轮询 setInterval 查 DOM，用 MutationObserver 监听 childList 更准更快。
- 记得调用
observer.disconnect()，否则观察器持续占用内存 - 监听范围尽量缩小：只观察目标父容器，别用
document.body全局监听 - 回调里处理逻辑要轻量，避免在
callback中又触发大量 DOM 写操作
