Modern web apps update the DOM constantly.
Listening only to user events is often not enough.

`MutationObserver` allows JavaScript to **observe DOM mutations**
and respond immediately when changes occur.

## 🔹 What Is `MutationObserver`?

`MutationObserver` is a browser API that:
- Watches DOM nodes
- Detects structural or attribute changes
- Notifies your code asynchronously

It replaces older, deprecated mutation events.

## 🔹 Creating an Observer

```js
const observer = new MutationObserver(callback);

The callback runs when mutations are detected.

🔹 Observing DOM Changes

observer.observe(targetNode, {
 childList: true,
 attributes: true,
 subtree: true
});

Options explained:
    •    childList → added/removed nodes
    •    attributes → attribute changes
    •    subtree → include all descendants

🔹 Reading Mutation Records

const observer = new MutationObserver(mutations => {
 mutations.forEach(mutation => {
   console.log(mutation.type);
 });
});

Common mutation types:
    •    childList
    •    attributes
    •    characterData

🔹 Example: Detect Added Elements

observer.observe(container, { childList: true });

function addItem() {
 container.appendChild(document.createElement("div"));
}

The observer reacts automatically.

🔹 Why Not Polling?

Polling:
    •    Wastes CPU
    •    Introduces delays
    •    Is unreliable

MutationObserver:
    •    Is event-driven
    •    Efficient
    •    Precise

🔹 Common Use Cases
    •    Watching SPA content updates
    •    Enhancing third-party widgets
    •    Tracking DOM changes for analytics
    •    Auto-initializing dynamic components

🔹 Common Mistakes

❌ Observing the entire document unnecessarily
❌ Forgetting to disconnect observers
❌ Doing heavy work inside callbacks

🔹 Disconnecting the Observer

observer.disconnect();

Always disconnect when observation is no longer needed.

🔹 Best Practices
    •    Observe the smallest possible subtree
    •    Keep callbacks lightweight
    •    Disconnect when done

✅ Recommended:

observer.observe(list, { childList: true });

🎯 Final Thought

The DOM is alive —
MutationObserver lets your code watch and react intelligently.

Use it to build responsive, dynamic interfaces.