How To Track Changes In DOM Using JavaScript MutationObserver?

How To Track Changes In DOM
Using JavaScript MutationObserver?

In the company, web developers develop a web app for the client. It runs smoothly in the company while running & testing the same web app. But after deployment on the client side, it becomes heavy. There are many reasons due to which web apps become heavy on the client side such as the need for a richer UI to accommodate complex web apps, real-time calculation & so on.

Due to the increase in complexity of web apps, it is hard to find out the exact state of UI at every given movement during the lifecycle of the web app. These things become even harder when you are developing a framework or JavaScript library which needs to react & perform some actions with the DOM.

So, there is a need for some APIs by which you can observe the changes in DOM & for this you can use the MutationObserver. MutationObserver is a Web API that is used by modern browsers to detect the changes in DOM. In this MutationObserver web API, we can detect the newly added or removed nodes, changes in the text of text nodes, or attribute changes.

Why use MutationObserver to track the changes in DOM? The following are some cases, where using MutationObserver becomes easier to use:

● When you want to notify your web API visitor that there are some changes that have occured on the page you are using currently.

● When you are working on a new JavaScript Framework that loads some modules dynamically which depends on how DOM changes.

● When you are working on the WYSIWYG editor & you are trying to implement redo/undo functionality. By using the MutationObserver web API you will get to know at any given point what changes have been made, so you can easily undo them.

Now, let's see how to use MutationObserver to track changes in DOM? You can easily implement the MutationObserver in your web app. To use MutationObserver you need to create an instance of it by passing it to a function that will get called every time when the mutation occurs in the script. In the first argument of the function, there is a collection of all mutations which occurred in a single batch. Each of these mutations provides information about its type & changes which have occurred.

var MutationObserver = new MutationObserver(function (mutations)

{

         mutations.forEach(function (mutation)

   {

    console.log(mutation) ;

    });

});

When we create this MutationObserver object it has 3 methods as following

● observe -starts listening changes. It has 2 arguments - the DOM node which you want to observe & the setting object.

● disconnect - stops listening changes.

● takeRecords - Return the last batch of changes before the callback has been fired.

Following is the code snippet, which shows how MutationObserver starts observing mutations:

MutationObserver.observe(document.documentElement,{

attributes : true;

characterData : true;

childList : true;

subtree :true;

attributeOldValue : true;

characterDataOldValue : true;

});

Now, let's take a one example to see how changes in DOM can be tracked

<div id ="div1" class ="test"> Simple Div </div>

Now, we are going to remove the class from div using the JQuery removeAttr method.

$("#div1").removeAttr("class");

As we started observing, After calling MutationObserver(), we will see the log in the console of the respective MutationRecord.

This mutation is caused by the removing class attribute.

Finally, if you want to stop observing DOM changes, you can add a code as follows:

mutationObserver.disconnect();

This MutationObserver in JavaScript is widely supported by all browsers so you can use it in your web API without any hesitation.

There are some alternatives for the MutationObserver that are also available. Like:

Polling:  It is the simplest but most unsophisticated way to observe changes in DOM. You use it by setting up browser setInterval webAPI to a task that would periodically check if any changes are occured.

MutationEvent:  MutationEvent API is useful but Mutation events get fired for every single change in the DOM which causes a performance issue. Due to this all modern browsers have stopped using the MutationEvent API.

CSS Animations:  It is a little bit of a strange alternative. The basic idea of using CSS animation is that you have to create a small animation which would be triggered when an element gets added to the DOM. This animation execution time is so small that practically user can't see it.

MutationObserver offers many advantages than the above mentioned alternatives. In essence, it covers every single change that has occurred in the DOM & it is in a more optimized way as it gets fired in the batch.

It is supported by all modern browsers along with a couple of polyfills which use MutationEvent.

Conclusion:

It's always good to use MutationObserver or JavaScript in web API to track changes in the DOM & which is a very much optimized way to track changes.

You've successfully subscribed to HTML5Awesome
Great! Next, complete checkout to get full access to all premium content.
Welcome back! You've successfully signed in.
Unable to sign you in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Billing info update failed.