如何正确操作 DOM 元素：避免因 innerHTML 重写导致的引用失效问题

当通过 innerhtml 重写 html 内容时，原有通过 queryselector 获取的 dom 节点引用会失效，因为 innerhtml 会销毁并重建子节点；必须重新查询或改用函数式封装来确保获取最新 dom 实例。

在 Web 开发中，初学者常误以为 document.querySelector() 返回的 DOM 引用具有“动态绑定”能力——即只要页面中存在同 ID 的元素，该引用就能自动同步更新。但事实恰恰相反：DOM 引用是静态快照，指向内存中某个特定节点实例。

以你的代码为例：

Some text:Content!

const result = document.querySelector("#span-id"); // ✅ 获取原始 span 节点（内存地址 A）
const resultText = document.querySelector("#h2-id");

resultText.textContent = "Something else."; 
// → 此时 span 节点被移除（textContent 清空所有子节点）

resultText.innerHTML = 'Some text:Content!';
// → ⚠️ 关键行为：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:Content!';

// 操作前重新获取最新 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:Content!';

getSpan().textContent = "New Content"; // ✅ 总是返回当前 DOM 中的真实节点

? 关键理解：

• innerHTML 是破坏性操作，它会先清空子节点树，再解析字符串并插入新节点；
• 所有原生 DOM 方法（如 appendChild, replaceWith, innerHTML）均不保留旧节点引用；
• ID 唯一性仅保证 querySelector 每次返回当前匹配的第一个有效节点，不提供“引用自动刷新”机制。

⚠️ 注意事项：

• 避免对频繁变动的 DOM 区域长期缓存节点引用；
• 若需高性能批量更新，优先使用 DocumentFragment 或现代方案（如 React/Vue 的响应式更新）；
• 调试时可用 console.dir(element) 查看节点是否仍处于 connected: true 状态。

总结：DOM 引用不是“活链接”，而是“快照指针”。保持引用有效性，核心原则只有一条——需要时就重新查，不依赖过期缓存。