如何检测变量中的DOM元素是否存在于当前DOM（区分隐藏与移除）

在SPA这类DOM动态更新的场景里，确实会遇到这种头疼的情况——变量里存的DOM元素看起来属性都完好，但其实已经被从页面中移除了，而getBoundingClientRect()又没法区分“被移除”和display:none的元素，因为两者的矩形值都是全0。

给你两个靠谱的解决方案，根据你的浏览器兼容需求选就行：

方案一：使用原生API isConnected（推荐现代浏览器） #

这是最直接高效的方法，浏览器原生提供了Element.isConnected属性，专门用来判断元素是否连接到当前的DOM树（包括Shadow DOM）。对于display:none的元素，它仍然属于DOM树的一部分，所以isConnected会返回true；而被移除的元素会返回false。

示例代码：

var element = document.getElementsByTagName("div")[0];

if (element.isConnected) {
  console.log("这个元素还在DOM树里哦");
} else {
  console.log("元素已经被从DOM中移除了");
}

这个属性在Chrome、Firefox、Safari、Edge等现代浏览器都支持，如果你不需要兼容IE，直接用这个就完事了。

方案二：遍历父元素链（兼容旧浏览器） #

如果需要兼容IE这类不支持isConnected的旧浏览器，可以通过循环遍历元素的父节点，直到找到document.body或者document.documentElement（HTML根元素）。如果能找到，说明元素还在DOM树里；如果父节点最终变成null，就说明元素已经被移除了。

示例代码：

function isElementInDOM(element) {
  let currentNode = element;
  while (currentNode) {
    // 找到根节点或body，说明元素在DOM中
    if (currentNode === document.documentElement || currentNode === document.body) {
      return true;
    }
    currentNode = currentNode.parentElement;
  }
  return false;
}

// 使用方法
var element = document.getElementsByTagName("div")[0];
if (isElementInDOM(element)) {
  console.log("元素仍在DOM树中");
} else {
  console.log("元素已被移除");
}

这个方法同样能区分display:none的元素——因为隐藏元素的父链是完整的，最终会找到body或HTML根元素，返回true。

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