Проверьте, имеет ли элемент из переменной ссылку в текущем 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 и т. д.

Вопрос: как проверить, присутствует ли мой элемент DOM из element в DOM?

Я попытался проверить element.getBoundingClientRect(), и да, есть некоторые различия: элемент, который удален из DOM, имеет все нули в своем ограничивающем прямоугольнике.Но есть одна вещь: элемент с display: none также имеет все нули в своем ограничительном прямоугольнике, несмотря на то, что он все еще присутствует в DOM (физически, скажем так).В моем случае это неприемлемо, потому что мне нужно отличать скрытый элемент от удаленного.

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>