19.2 Mutation Observer

Overview

MutationObserver provides a way to watch for changes being made to the DOM tree, replacing the deprecated Mutation Events.

MutationObserver Flow

┌─────────────────────────────────────────────────────────────────────────┐
│                    MutationObserver Flow                                │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  1. Create Observer                                                     │
│     ┌─────────────────────────────┐                                    │
│     │ new MutationObserver(cb)    │                                    │
│     └─────────────────────────────┘                                    │
│                  │                                                      │
│                  ▼                                                      │
│  2. Configure & Observe                                                 │
│     ┌─────────────────────────────┐                                    │
│     │ observer.observe(target, {  │                                    │
│     │   childList: true,          │                                    │
│     │   attributes: true,         │                                    │
│     │   subtree: true             │                                    │
│     │ })                          │                                    │
│     └─────────────────────────────┘                                    │
│                  │                                                      │
│                  ▼                                                      │
│  3. Mutations Happen                                                    │
│     ┌─────────────────────────────┐                                    │
│     │ DOM changes are collected   │                                    │
│     │ in a batch (microtask)      │                                    │
│     └─────────────────────────────┘                                    │
│                  │                                                      │
│                  ▼                                                      │
│  4. Callback Invoked                                                    │
│     ┌─────────────────────────────┐                                    │
│     │ callback(mutationsList, obs)│                                    │
│     │ Process all mutations       │                                    │
│     └─────────────────────────────┘                                    │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Configuration Options

MutationRecord Properties

Basic Usage

// Create observer
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'childList') {
      console.log('Children changed');
    } else if (mutation.type === 'attributes') {
      console.log(`${mutation.attributeName} changed`);
    }
  }
});

// Start observing
observer.observe(element, {
  childList: true,
  attributes: true,
  subtree: true,
});

// Stop observing
observer.disconnect();

// Get pending mutations
const pending = observer.takeRecords();

Common Use Cases

• •Dynamic Content: React to third-party script changes
• •Form Validation: Watch input value changes
• •Analytics: Track UI interactions
• •Polyfills: Implement custom element behavior

Summary

• •MutationObserver is async and batched
• •Configure precisely what to observe
• •Use subtree for deep observation
• •Call disconnect() when done
• •Avoid infinite loops in callbacks