← Intersection Observer Debounce & Throttle →

Mutation Observer API

Mutation Observer provides the ability to watch for changes being made to the DOM tree. It's the modern replacement for Mutation Events.

Monitor DOM changes asynchronously
Watch for node additions/removals
Track attribute modifications
Monitor text content changes
Better performance than Mutation Events

📈 Statistics

0

Total Mutations

🎯 Target Element

Target Element (Observed)

Make changes below to trigger mutations...

📋 Mutation Log

Time	Type	Details
No mutations detected yet. Start observer and make changes.

📝 Code Example

JavaScript Editor

// Create Mutation Observer
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    console.log(`Mutation type: ${mutation.type}`);
    
    switch(mutation.type) {
      case 'childList':
        console.log('Child nodes changed');
        mutation.addedNodes.forEach(node => {
          console.log('Added:', node);
        });
        mutation.removedNodes.forEach(node => {
          console.log('Removed:', node);
        });
        break;
        
      case 'attributes':
        console.log(`Attribute ${mutation.attributeName} changed`);
        console.log(`Old value: ${mutation.oldValue}`);
        console.log(`New value: ${mutation.target.getAttribute(mutation.attributeName)}`);
        break;
        
      case 'characterData':
        console.log('Text content changed');
        console.log(`Old text: "${mutation.oldValue}"`);
        console.log(`New text: "${mutation.target.textContent}"`);
        break;
    }
  });
});

// Configuration
const config = {
  childList: true,        // Observe child additions/removals
  attributes: true,       // Observe attribute changes
  characterData: true,    // Observe text changes
  subtree: true,          // Observe descendants
  attributeOldValue: true, // Record old attribute value
  characterDataOldValue: true, // Record old text value
  attributeFilter: ['class', 'style'] // Only observe specific attributes
};

// Start observing
observer.observe(targetElement, config);

// Perform mutations
targetElement.appendChild(newElement);      // Triggers childList
targetElement.setAttribute('data-test', '1'); // Triggers attributes
targetElement.textContent = 'New text';     // Triggers characterData

// Stop observing
observer.disconnect();

// Take records without stopping
const mutations = observer.takeRecords();
console.log('Pending mutations:', mutations);

Real-World Use Cases

When to Use:

Third-party script monitoring: Detect unwanted DOM changes
Rich text editors: Track content changes
UI framework development: React to DOM updates
Browser extensions: Modify pages safely
Debugging: Track unexpected DOM mutations
Form validation: Watch for input changes

Performance Tips:

Use specific attribute filters when possible
Avoid observing large subtrees unnecessarily
Disconnect observers when not needed
Batch DOM operations to minimize mutations
Use debouncing for frequent mutations
Consider using requestAnimationFrame for UI updates

← Intersection Observer Debounce & Throttle →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Mutation Observer API

⚙️ Observer Configuration

📈 Statistics

0

🎯 Target Element

📋 Mutation Log

📝 Code Example

Real-World Use Cases

When to Use:

Performance Tips:

Follow Us

Our Tools

Our Company

Special Tools