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.
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 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)
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:
attributes : true;
characterData : true;
childList : 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.
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:
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.