Check whether element from variable has a refference in current DOM

Question

Assume I have an element in a variable:

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

At some point of time my markup is changing (like in SPA), and element from variable has been removed from DOM, but it still available in the element with all properties, such as parentElement, etc.

The question is: how to check, if my DOM element from element is present in DOM?

I tried to check the element.getBoundingClientRect(), and yes, there are some differences: element that removed from DOM has all the zeroes in his bounding rect. But there is one thing: element with display: none also has all the zeroes in its bounding rect, despite of it is still presents in the DOM (physically, lets say). This is not acceptable in my case, because I need to differ hidden element from removed element.

Agney · Accepted Answer · 2018-05-13 11:28:09Z

2

You can use contains for this purpose

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>

answered May 13, 2018 at 11:28

Agney

19.3k7 gold badges60 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Limbo Over a year ago

God bless you! Thanks a lot :)

Collectives™ on Stack Overflow

Check whether element from variable has a refference in current DOM

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related