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中（物理上，假设）。在我的情况下这是不可接受的，因为我需要将隐藏元素与被删除元素区分开来。

Answer 1

您可以将contains用于此目的

＆＃13;

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();

＆＃13;

.hide {
  display: none;
}

＆＃13;

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

＆＃13;

检查变量中的元素是否在当前DOM

1 个答案: