javascript - 检查变量中的元素在当前 DOM 中是否有引用

Question

假设我在变量中有一个元素:

var element = document.getElementsByTagName("div")[0] 
// here can be any kind of getting element, e. g. React ref, Chrome's devtools $0, etc.

在某个时间点，我的标记正在发生变化(例如在 SPA 中)，并且变量中的元素已从 DOM 中删除，但它在具有所有属性的 element 中仍然可用，例如 parentElement 等

问题是:如何检查 element 中的 DOM 元素是否存在于 DOM 中？

我尝试检查 element.getBoundingClientRect()，是的，存在一些差异:从 DOM 中删除的元素在其边界矩形中全部为零。但有一件事:具有 display: none 的元素在其边界矩形中也具有所有零，尽管它仍然存在于 DOM 中(可以说，在物理上)。在我的情况下这是 Not Acceptable ，因为我需要将隐藏元素与已删除元素区分开来。

Answer 1

您可以使用contains为此目的

function contains() {
  const result = document.body.contains(element);
  console.log(result);
}

const element = document.getElementById('app');
contains();

element.classList.add('hide');
contains();

element.parentNode.removeChild(element);
contains();

.hide {
  display: none;
}

<div id="app">App</div>