DOM

How to Watch DOM Changes

Use MutationObserver to detect DOM modifications

Quick Answer (2024 ES6+ Way)

javascript

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log('DOM changed:', mutation.type);
  });
});

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

Live Example

javascript

// Watch for new elements
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1) {
          console.log('Element added:', node.tagName);
        }
      });
    }
    
    if (mutation.type === 'attributes') {
      console.log(`Attribute ${mutation.attributeName} changed`);
    }
  });
});

// Start observing
const container = document.querySelector('#container');
observer.observe(container, {
  childList: true,      // Watch for children changes
  subtree: true,        // Watch all descendants
  attributes: true,     // Watch attribute changes
  attributeOldValue: true,
  characterData: true   // Watch text changes
});

// Stop observing
// observer.disconnect();

Common Variations

Wait for Element

javascript

function waitForElement(selector) {
  return new Promise(resolve => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }
    const observer = new MutationObserver(() => {
      if (document.querySelector(selector)) {
        resolve(document.querySelector(selector));
        observer.disconnect();
      }
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
}

Specific Attribute Watch

javascript

observer.observe(element, {
  attributes: true,
  attributeFilter: ['class', 'data-status']
});

❌ Don't Do This (Outdated Way)

Avoid polling with setInterval

javascript

// DON'T DO THIS
setInterval(() => {
  if (document.querySelector('.new-element')) {
    // Check repeatedly
  }
}, 100);

Browser Support

✓ Works in all modern browsers (IE11+)

#dom#observer#mutations