How can I check if an element exists in the visible DOM?

javascript

dom-manipulation

javascript-variables

visibility-checks

byAnton Shumikhin·Dec 23, 2024

Confirm an element's visibility in the displayable layout with:

function isElementVisible(el) {
  const mysteryBox = document.querySelector(el); // our "out-of-the-blue" element
  if (!mysteryBox) return false;

  const { top, bottom, left, right } = mysteryBox.getBoundingClientRect();
  return (
    top < window.innerHeight && /* The riddle: It’s not buried underground */
    bottom > 0 && /* Not flying high in the sky either */
    left < window.innerWidth && /* Doesn't take a step to the left */
    right > 0 /* ...or a jump to the right */
  );
}

console.log(isElementVisible('#elementId')); // It's visible! No? Well, it's just not that into you.

document.querySelector targets the element, and getBoundingClientRect calculates its vista bounds. They collaborate to affirm the element's display status, not just its mere DOM existence.

Deep dive into detection strategies

Element in the DOM?

Check an element's presence in the DOM using the likes of document.getElementById or document.querySelectorAll. But be aware, this only attests to the element's existence, not its visibility.

let elementExists = document.getElementById('elementId');
console.log(!!elementExists); // true or false, check for existence... not for invisibility cloak usage.

This can be tricky if the element's a master of hide and seek (display: none), even though it's in the DOM.

Is the element visible?

Visibility heavily relies on positions and renderings. Here's your CSS detective kit:

getBoundingClientRect: provides a snapshot of the element’s position in the viewport.
display, visibility, opacity: These CSS properties dictate its visibility.

Elements visible to users pass these tests:

Resides within the viewport boundaries.
Is not ghosting you with CSS (display: none or visibility: hidden).
Is not a transparent entity (opacity not 0).

Keeping it cross-browser compatible

Apply document.body.contains(element) to sustain cross-browser compatibility while verifying if the parent document accommodates the element.

Variable retention after DOM removal

Variables have a knack for retaining a reference to a removed DOM node. To update this, define the variable to null manually.

let myElement = document.getElementById('myElement');
// myElement plays 'Now you see me, now you don't!'
myElement = null; // Set the stage for the next act. No remnants of the previous act allowed!

Use Node.isConnected to validate an element's attachment to the DOM. Unless explicitly removed, it stays true (like a loyal friend).

Dealing with the Shadow DOM

In a scenario with Shadow DOM, use element.shadowRoot combined with node.isConnected. The Shadow DOM likes to play hide and seek, but it's less thrilling for developers.