如何检测存储的DOM元素引用与实际DOM节点的关联是否断裂？

首先得明确你遇到问题的核心原因：当第三方脚本用innerHTML +=动态添加元素时，浏览器会把目标元素的现有内容重新解析生成全新的DOM节点，你之前缓存的引用指向的是旧的DOM节点——虽然这个旧节点还存在于内存中，但已经脱离了当前的DOM树，所以对它的操作自然不会反映到页面视图上。

针对你的高频操作（每秒60次）需求，这里有两个高效的解决方案，既能避免反复调用document.getElementById()的性能损耗，又能自动检测并恢复DOM引用：

方案一：用isConnected属性低成本检测引用有效性 #

DOM节点内置了isConnected属性，它可以快速判断当前节点是否仍挂载在DOM树中，这个属性的访问开销极低，远低于查询DOM的开销。你可以在每次高频操作前做一次简单检查：

// 假设self.element是你缓存的DOM引用
function performHighFreqUpdate() {
  // 检查缓存的节点是否还在DOM树中
  if (!self.element.isConnected) {
    // 仅当引用失效时，才重新获取节点
    self.element = document.getElementById(__DOM__ID__);
  }
  // 执行你的高频操作，比如更新内容
  self.element.textContent = getCurrentValue();
}

这个方案的优势是实现简单，几乎没有额外性能负担——毕竟只是访问一个节点的内置属性，每秒60次的检查完全不会对旧设备造成压力。

方案二：用MutationObserver被动监听DOM变化 #

如果想进一步减少主动检查的开销，可以用MutationObserver来监听目标元素的父节点，当第三方脚本修改DOM导致你的目标节点被替换时，自动重新获取引用。这样只有在DOM真的发生变化时才会触发更新，平时的高频操作直接用缓存的引用即可：

// 先获取目标元素的父节点（根据你的DOM结构调整）
const parentNode = document.getElementById(__PARENT_DOM_ID__);
// 初始化观察者
const domObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查是否有节点被添加或移除
    if (mutation.addedNodes.length || mutation.removedNodes.length) {
      const newElement = document.getElementById(__DOM__ID__);
      // 如果新节点存在且和缓存的引用不一致，则更新缓存
      if (newElement && newElement !== self.element) {
        self.element = newElement;
      }
    }
  });
});

// 配置监听选项：只监听子节点的添加/移除
domObserver.observe(parentNode, { childList: true });

这个方案更“被动”，适合第三方脚本修改DOM频率不高的场景，能最大化减少不必要的DOM操作。

补充说明 #

• 为什么不推荐每秒60次调用document.getElementById()？因为DOM查询是相对昂贵的操作，尤其是在旧设备上，高频查询会占用大量主线程资源，进而影响页面流畅度。
• isConnected是ES2015引入的属性，主流浏览器（包括IE11）都支持，兼容性不用担心。

内容的提问来源于stack exchange，提问作者Mevia