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

General Discussions
1

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

I need to test whether an element exists in the DOM without relying on the getElementById method. I’ve created a live demo, and below is my code that stores an element in a variable and then removes it from the DOM:

<!DOCTYPE html>
<html>
<head>
    <script>
    var getRandomID = function (size) { ... },
        isNull = function (element) { ... };
    window.onload = function () {
        var image = document.getElementById("demo");
        // Test for existence here
    };
    </script>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

Even though I remove the element from the DOM, the variable still holds a reference to the original element, not a live reference. I’m using the isNull function to check for existence, but I’d like to know if there’s a simpler or more effective way to check if an element exists in the DOM using JavaScript. Also, any insights into why variables behave this way in JavaScript would be appreciated!

2

I’ve been working with DOM manipulation for a while, and one of the most straightforward ways to check if an element exists in the DOM is by using document.querySelector(). Unlike getElementById(), this method is more flexible because you can select elements using any CSS selector. Plus, it returns null if the element isn’t found, which makes it super easy to check if it exists.

Solution:

window.onload = function() {
    var element = document.querySelector("#demo");
    if (element) {
        console.log("Element exists");
    } else {
        console.log("Element does not exist");
    }
};

This solution is clean and works great for single elements. You can even adjust the selector for more complex queries.

3

Nice one, @tim-khorev !

Another approach I’ve used a lot is document.getElementsByClassName(). If you’re dealing with multiple elements that share the same class, this method can be especially handy. It returns a live HTMLCollection, meaning if the DOM changes, the collection is automatically updated.

window.onload = function() {
    var elements = document.getElementsByClassName("demo-class");
    if (elements.length > 0) {
        console.log("Element exists");
    } else {
        console.log("Element does not exist");
    }
};

This approach works well when you’re expecting to find several elements. Just check the length property—if it’s greater than 0, you know the element(s) are there.

4

Yes, using document methods can help—but there are many other techniques you can combine with it to resolve your issue. One such useful method is document.contains().

document.contains()

If you have a reference to a parent element and want to check whether a specific child element exists within it, contains() provides a clean and effective way to do that. It checks if a given node is a descendant of the specified element.

Solution:

window.onload = function() {
    var parentElement = document.getElementById("parent");
    var childElement = document.getElementById("demo");

    if (parentElement.contains(childElement)) {
        console.log("Child element exists within the parent");
    } else {
        console.log("Child element does not exist within the parent");
    }
};

Here, contains is a more specific method if you are checking for an element’s existence relative to another element in the DOM.