Using MutationObserver to Monitor DOM Changes

One powerful tool available in modern browsers is the MutationObserver, which allows us to monitor when an element is added to the DOM.

Consider the following HTML snippet:

<div id='container'></div>

To observe the addition of a child element, we can implement the following code:

const container = document.getElementById('container');

setTimeout(() => {

const div = document.createElement('div');

div.textContent = 'hello';

div.id = 'hello';

container.appendChild(div);

}, 2000);

const observer = new MutationObserver((mutations, obs) => {

const hello = document.getElementById('hello');

if (hello) {

console.log(hello.innerText);

obs.disconnect();

return;

}

});

observer.observe(document, {

childList: true,

subtree: true

});

In this example, we use setTimeout to add a new div element with the ID "hello" to the "container" after a delay of two seconds.

The first video, "Wait for an Element to Exist in JavaScript," provides further insights into this approach.

Understanding the MutationObserver Callback

When we create the MutationObserver, we pass a callback function that receives two parameters: mutations and obs. The obs parameter represents the observer itself.

Inside the callback, we check for the existence of the element with the ID "hello." If found, we log its inner text and then call obs.disconnect() to cease observing changes in the DOM.

We initiate observation using observer.observe, setting both childList and subtree to true. This configuration allows us to track any additions or removals of elements, as well as changes to child elements.

The second video, "Wait For The Page And Elements To Fully Render Before Interacting To Avoid Detached From DOM Error," is a valuable resource to understand potential pitfalls.

In Plain English?

We appreciate your engagement with the In Plain English community! Don't forget to support the writer, and connect with us through our various platforms: X | LinkedIn | YouTube | Discord | Newsletter. Explore more content at CoFeed | Differ and continue your learning journey at PlainEnglish.io.