Master JavaScript Mutation Observer: amazing real-world use cases

Last updated on February 07, 2024

JavaScript Mutation Observer.

An underrated API for watching for changes in the DOM: "child added", "attribute changed", and more.

// Node/element to be observed for mutations
const targetNode = document.getElementById('my-el');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    } else if (mutation.type === 'attributes') {
      console.log(
        `The ${mutation.attributeName} attribute was modified.`
      );
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

I see a bunch of people online curious to know the point of this API in the real-world.

In this post I'll show you how I used it to easily shut-up this annoying script carrying out unwanted activities on the page.

And you'll see how sleek and polish the UI elements became after this.

The 3rd party script

It came from Mailchimp - a service for managing email lists.

Mailchimp provides embedded forms to easily collect sign-ups to your list.

These forms are HTML code embedded in your webpage without any additional configuration.

But being this ready-to-use nature comes at a cost; deeply embedded CSS stubbornly resisting any attempt to customize the form's look and feel.

I mean I know I definitely spent WAY more than I should have doing this, having to throw CSS !important all over the place and all...

Stubbornly rigid JS

On the JS side I had the remote Mailchimp script showing these pre-defined error/success messages after the request to the Mailchimp API.

Sure this was an decent success message but there was simply no built-in option to customize it. And we couldn't indicate success in other ways like a color or icon change.

Mutation Observer to the rescue...

Waiting for the precise moment the success text came in and instantly swapping out the copy for whatever I wanted and doing anything else.

And just like that the script was blocked from directly affecting the UI.

We basically turned it into an Event Emitter service; an observable.

This let us easily abstract everything into a React component and add various event listeners (like onSuccess and onError):

To create the polished form we saw earlier:

This is the power of the JavaScript Mutation Observer API.

Try Coding Beauty AI Assistant for VS Code

Meet the new intelligent assistant: tailored to optimize your work efficiency with lightning-fast code completions, intuitive AI chat + web search, reliable human expert help, and more.

Master JavaScript Mutation Observer: amazing real-world use cases

The 3rd party script

Stubbornly rigid JS

Try Coding Beauty AI Assistant for VS Code

See also