Waiting for an element to become available

Written byPhuoc Nguyen

Created

13 Sep, 2023

#Repeatedly checking for the existence of an element

If you're looking to check periodically for the existence of an element, there's a straightforward method you can use. Enter `setInterval()`, a built-in JavaScript function that allows you to repeatedly execute a function at a given interval. It requires two arguments: the function to execute, and the interval (in milliseconds) at which to execute it.

Here's an example:

const intervalId = setInterval(() => {
    // Select the element we want to wait for
    const targetElement = document.getElementById('my-element');

    if (targetElement)) {
        // Stop checking for the element
        clearInterval(intervalId);
        console.log('Element is now available');
    }
}, 100);

In this code snippet, we use `setInterval()` to repeatedly check for the target element every 100 milliseconds. Once the element is found, we stop checking for it by calling `clearInterval()` and do something with it.

#Using MutationObserver

When checking for the existence of an element in JavaScript, using `setInterval()` may seem like the easiest option. However, it's not the most efficient way to do it. This method repeatedly executes a callback function at a fixed interval until the element is found. This means that if the element takes a while to load, you could end up with unnecessary function calls, which can slow down your code.

A better approach is to use the `MutationObserver` API. This built-in JavaScript feature allows you to watch for changes in the DOM and execute a callback function when specific changes occur. By using `MutationObserver`, your code only runs when necessary, saving resources and improving efficiency.

To wait for an element to become available on a web page, you can create a `MutationObserver` that watches for changes to the DOM and checks if the desired element has appeared.

Here's an example of how to use `MutationObserver` for this purpose:

const observer = new MutationObserver((mutations) => {
    // Callback
});

// Start observing changes to the DOM
observer.observe(document.body, {
    childList: true,
    subtree: true,
});

In this example, we're creating a new `MutationObserver` to keep an eye on changes to the DOM. We tell the observer to watch for changes to the entire document (`document.body`) and everything within it (`{ childList: true, subtree: true }`).

To be more specific, the `childList` and `subtree` properties tell the observer which changes to the DOM it should pay attention to.

The `childList` property is a simple boolean that indicates whether changes to the target node's direct children should be observed. If set to `true`, the observer will keep an eye out for any additions or removals of child nodes.

The `subtree` property is also a boolean that determines whether changes to any descendant nodes of the target node should be observed. If set to `true`, the observer will watch for additions or removals of any descendant nodes, not just direct children.

By default, both properties are set to `false`, which means that only changes to the target node itself will be observed. But if you want to observe changes deeper in the DOM tree, you can set one or both properties to `true`.

The `MutationObserver` callback is triggered whenever a new element is added or an existing element is removed from the tracked element. Once the target element is found, we stop tracking by calling the `disconnect()` function.

Here's how we can wait for the target element to appear on the page:

const observer = new MutationObserver((mutations) => {
    const targetElement = document.getElementById('my-element');

    // Check if the target element has been added to the DOM
    if (targetElement)) {
        // Stop tracking
        observer.disconnect();

        // The target element is available, do something with it
        console.log('Element is now available');
    }
});

observer.observe(document.body, {
    childList: true,
    subtree: true,
});

#Conclusion

Using `MutationObserver` to wait for an element to become available on a webpage is a smarter and more flexible option than using `setInterval()`. The latter method repeatedly executes a callback function at fixed intervals, which can slow down your code by making unnecessary function calls. On the other hand, `MutationObserver` watches for changes in the DOM and executes a callback function only when specific changes occur. This means that your code runs only when necessary, saving resources and improving efficiency.

In summary, if you want a reliable and efficient way to wait for elements on a webpage, `MutationObserver` is definitely worth considering.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn