What is Mutation Observer and how to use it?

Introduction

The challenging task for web developers is to always think for delivering optimum user experiences in an effective way. Another vital method of solving the problem is Dom Object Model’s changes monitoring and the eventual response to anything that pops up. The fact that this is where Mutation Observer starts the struggle.

Itis a reliable JavaScript API. Moreover, the Skilled JavaScript Developers can watch the modification in the DOM made while the page still loads. DOM4 specification now features Mutation Observer; here, developers get a set of methods that become an elegant and very productive way to respond to both types of website modifications without resorting to outdated methods, such as polling or using deprecated mutation events.

If you are searching for a way to add powerful dynamic functionality to your JavaScript applications, MutationObserver is your tool.

With this blog, you will understand its concept in detail.

You also need to understand how different Javascript Frameworks work with it.

Without any delay, let’s get the started!

What Is Mutation Observer

Mutation observers is a built-in object that observes DOM Changes and calls or fires a callback function to react to the changes in the DOM Tree.

We can say that a they will allow you to keep the watch on Element changes in DOM.

How To Use Mutation Observer:

1. Step 1

• Create a callback function that will execute DOM Changes.
• Code:

  const callback = function (mutationsList, observer) {
  				// 
  				}

2. Step 2

• Set up an observer per callback symbol. This is an observer that should be sent to the given function.
• Starting off with MutationObserver, build an indeed object.
• Code:

  let observer = new MutationObserver(callback);

3. Step 3

• Finally, the next function is observe(). So, this call is for observing DOM changes.
• Code:

  observer.observe(targetNode, Config);

• targetNode:
  • This feature is of paramount importance, and it is the one that the virus monitor will keep attention on and alert the observer when any changes are observed.
• config:
  • It’s a simple boolean option “What kind of changes to detect”

• Example:
  • childList – Detect changes in direct children of targetNode.
  • subtree – Detect changes in all descendants of the node.
  • attributes – Detect Attribute changes.
  • attributeFilter – It provides a filter to detect particular attribute changes.
  • characterData – which is used to observe the changes of text content.
  • attributeOldValue – If it’s true, then It’ll pass old and new attribute data to the callback function, else pass only new data.
  • characterDataOldValue – If it’s true, then It’ll pass old and new characterData to the callback function, else pass only new data.

4. Step 4

• pass in the target node and configuration
• Code:

  observer.observe(targetNode, config);

Code Block:

// define the target node
				var targetNode = document.body;
		
				// configuration of the observer
				const config = { childList: true, characterData: true, subtree: true, attributes: true, };
		
				// callback function
				const callback = function (mutationsList, observer) {
				console.log('Changes Detected');
				};
		
				// Create observer instance
				const observer = new MutationObserver(callback);
		
				// pass in the target node and configuration
				observer.observe(targetNode, config);

disconnect() Method

• MutationObserver provides a disconnect() function to stop observing.
• Code:

  observer.disconnect();

Where is it required?

• You want to let your web app visitor know that the page he’s on has changed.
• You’re working on a JavaScript framework that dynamically loads modules based on DOM(Document Object Model) changes.
• When you are trying to implement undo/redo functionality.
• You can continuously observe the dynamic content updating in DOM(Document Object Model).

Alternatives :

• 1. Polling

  • You can create a task that checks for updates regularly using the browser setInterval WebAPI. Naturally, the performance of the web app/website suffers greatly as a result of this strategy.

• 2. MutationEvents

  • Mutation events are fired on every single change in the DOM But It causes performance issues and also Modern Browsers do not support MutationEvents.

• 3. CSS animations

  • The basic concept is to construct an animation that is triggered once an element is added to the DOM. The duration of the animation should be so short that it is virtually undetectable to the user.

First, we need a parent element, inside which, we’d like to listen to node insertions:

<div id=”target-element”></div>
		
				To get a handle on node insertion, To master node insertion, we'll need to put up a series of keyframe animations that will begin when the node is inserted:
		
				@keyframes node-Inserted { 
				from { opacity: 0.99; }
				to { opacity: 1; } 
				}

After you’ve built the keyframes, you’ll need to apply the animation to the objects you want to listen for. Small durations are important since they reduce the animation footprint in the browser:

#target-element * {
				animation-duration: 0.001s;
				animation-name: nodeInserted;
				}

This adds the animation to all of the target-child element’s nodes.
We’ll need a JavaScript function to act as a listener for events. The initial event.animationName check must be performed within the function to guarantee that the animation is the one we want.

var insertionListener = function(event) { 
				if (event.animationName === "nodeInserted") {
				console.log("Node Inserted: " + event.target);
				}
				}

Now, add the event listener to the parent:

document.addEventListener(“animationstart”, insertionListener, false);

Over the above-mentioned solutions, MutationObserver has a lot of advantages. In essence, it covers every possible change in the DOM, and it’s far more efficient because it fires the changes in batches. Furthermore, all major modern browsers support MutationObserver.