当通过 innerhtml 重写 html 内容时，原有通过 queryselector 获取的 dom 节点引用会失效，因为 innerhtml 会销毁并重建子节点；必须重新查询或改用函数式封装来确保获取最新 dom 实例。
在 Web 开发中，初学者常误以为 document.querySelector() 返回的 DOM 引用具有“动态绑定”能力——即只要页面中存在同 ID 的元素，该引用就能自动同步更新。但事实恰恰相反：DOM 引用是静态快照，指向内存中某个特定节点实例。
以你的代码为例：
<h2 id="h2-id">Some text:<span id="span-id">Content</span>!</h2>
const result = document.querySelector("#span-id"); // ✅ 获取原始 span 节点（内存地址 A）
const resultText = document.querySelector("#h2-id");
resultText.textContent = "Something else.";
// → 此时 span 节点被移除（textContent 清空所有子节点）
resultText.innerHTML = 'Some text:<span id="span-id">Content</span>!';
// → ⚠️ 关键行为：innerHTML 会彻底销毁原 span 节点（A），并创建一个**全新**的 span 节点（内存地址 B）
// → result 仍指向已销毁的节点 A，不再与 DOM 中的新 span（B）关联
result.textContent = "New Content"; // ❌ 无效：操作的是已脱离 DOM 的旧节点
console.log(resultText.textContent); // 输出 "Some text:Content!" —— 新 span 的原始文本未变这就是为什么 result.textContent = "New Content" 没有生效：你修改的是一个已被 GC 标记为“可回收”的孤立对象，而非当前 DOM 树中的真实元素。
✅ 正确做法有以下两种：
立即学习“前端免费学习笔记（深入）”；
方案一：每次操作前重新查询（推荐用于简单场景）
const resultText = document.querySelector("#h2-id");
resultText.textContent = "Something else.";
resultText.innerHTML = 'Some text:<span id="span-id">Content</span>!';
// 操作前重新获取最新 span 实例
const freshSpan = document.querySelector("#span-id");
freshSpan.textContent = "New Content";
console.log(resultText.textContent); // ✅ "Some text:New Content!"方案二：封装为查询函数（更健壮、适合复用）
const getSpan = () => document.querySelector("#span-id");
resultText.textContent = "Something else.";
resultText.innerHTML = 'Some text:<span id="span-id">Content</span>!';
getSpan().textContent = "New Content"; // ✅ 总是返回当前 DOM 中的真实节点? 关键理解：
- innerHTML 是破坏性操作，它会先清空子节点树，再解析字符串并插入新节点；
- 所有原生 DOM 方法（如 appendChild, replaceWith, innerHTML）均不保留旧节点引用；
- ID 唯一性仅保证 querySelector 每次返回当前匹配的第一个有效节点，不提供“引用自动刷新”机制。
⚠️ 注意事项：
- 避免对频繁变动的 DOM 区域长期缓存节点引用；
- 若需高性能批量更新，优先使用 DocumentFragment 或现代方案（如 React/Vue 的响应式更新）；
- 调试时可用 console.dir(element) 查看节点是否仍处于 connected: true 状态。
总结：DOM 引用不是“活链接”，而是“快照指针”。保持引用有效性，核心原则只有一条——需要时就重新查，不依赖过期缓存。
