# The Mutation Observer JavaScript.

As a developer, it is often necessary to monitor changes in the **Document Object Model** (DOM) to dynamically update the user interface. The **Mutation Observer API** is a powerful tool that allows developers to do just that, and it comes as a successor to the now deprecated **Mutation Events** of DOM3.

One of the key benefits of the Mutation Observer API is its simplicity. The API is easy to use and only requires a few options to set up. For example, you can specify which elements you want to watch for changes, and what type of changes you want to be notified of. This allows you to target specific elements and changes in the DOM, which can be particularly useful when working with complex applications.

In addition, the Mutation Observer API is also **highly efficient**. It works by observing the DOM tree, rather than constantly polling the DOM for changes. This means that it only triggers a notification when an actual change occurs, which helps to reduce the amount of unnecessary processing.

Overall, the Mutation Observer API is a valuable tool for any developer working with dynamic user interfaces. Its ability to monitor changes in the DOM simply and efficiently makes it an ideal choice for many types of applications. So, it is important to understand and use this API in your development process.

---

### Usage

The Mutation Observer takes a **callback**. The callback is executed whenever a mutation being watched occurs. We would start by creating a callback for the instance of the observer. The callback takes in two parameters a **mutationList** and an **observer**. The **mutationList** would store all the changes occurring to the element being watched which allows us to perform a type check to see the type of mutation that occurred.

```javascript
// Called when a new change happens in the element being watched
const callback = (mutationList, observer) => {
    for(let mutation of mutationList){
        if(mutation.type === 'attributes'){
            // An attribute has been mutated e.g a classList
            // Some logic
        }else if(mutation.type === 'childlist'){
            // A child node has been mutated (added/removed)
            //  Some logic
    };
  };            
};
```

You would then create a **variable** that stores the element you will be **watching** and one for a config object. The **config object** tells the observer what changes it is supposed to watch.

```javascript
const myElem = document.getElementById('targetNode');
const config = { attributes:true, childlist:true, subTree:true };
```

You now instantiate a **new Mutation Observer** and pass the **callback** function we created earlier as its **argument**.

```javascript
const ourObserver = new MutationObserver(callback);
```

Now we can watch for changes in our **myElem** by calling the **observe** method on the **ourObserver instance**. The observe method accepts two arguments the **element** being watched and the **config** we created.

```javascript
ourObserver.observe(myElem, config);
```

For any change e.g a **new child element being added** to myElem the callback would be fired and you can perform desired logic.

Without forgetting you can later stop the observer from watching **myElem**. This can be achieved by calling the **disconnect** method on the **ourObserver instance**.

```javascript
/* Some time later */
ourObserver.disconnect() 
// The observer stops watching for changes
```

### Example:

Here we watch the **body** for any changes in its **childList** and if any change occurs we can perform some logic.

```javascript
// Mutation Observer setup
const callback = (mutationsList, observer) => {
	for (let mutation of mutationsList) {
		if (mutation.type === 'childList') {
		    //Perform some logic
		}
	}
};
const observer = new MutationObserver(callback);

observer.observe(document.body, {
	attributes: true,
	childList: true,
	subtree: true,
});
```

Some use cases of the Mutation Observer API are :

* Tracking changes to the DOM tree such as when an element is added, removed or modified.
    
* When implementing real-time updates to a webpage such as when new data has been received from the server.
    
* When monitoring and reporting performance metrics, such as how long it would take for changes to be made to the DOM.
    

Hope that was helpful. Happy coding :)