Mutation Observer: Watching the DOM for Changes

Mutation Observer: Watching the DOM for Changes | DevPrep

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log("Type:", mutation.type);
    console.log("Target:", mutation.target);
    
    if (mutation.type === "childList") {
      console.log("Added:", mutation.addedNodes);
      console.log("Removed:", mutation.removedNodes);
    }
    
    if (mutation.type === "attributes") {
      console.log("Attribute:", mutation.attributeName);
      console.log("Old value:", mutation.oldValue);
    }
  });
});

observer.observe(document.getElementById("app"), {
  childList: true,      // Watch for added/removed children
  attributes: true,     // Watch for attribute changes
  characterData: true,  // Watch for text content changes
  subtree: true,        // Watch entire subtree
  attributeOldValue: true, // Record old attribute values
});

// Initialize tooltips on dynamically added elements
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        const tooltips = node.querySelectorAll("[data-tooltip]");
        tooltips.forEach(initTooltip);
      }
    });
  });
});
observer.observe(document.body, { childList: true, subtree: true });

// Detect when a third-party script modifies your DOM
function watchForTampering(element) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === "childList") {
        mutation.addedNodes.forEach((node) => {
          if (node.tagName === "SCRIPT" || node.tagName === "IFRAME") {
            console.warn("Suspicious element added:", node);
            node.remove();
          }
        });
      }
    });
  });
  observer.observe(element, { childList: true, subtree: true });
}

// Watch for size changes via style attribute
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === "style") {
      handleResize(mutation.target);
    }
  });
});
observer.observe(element, { attributes: true, attributeFilter: ["style"] });

function useMutationObserver(ref, callback, options) {
  useEffect(() => {
    if (!ref.current) return;
    const observer = new MutationObserver(callback);
    observer.observe(ref.current, options);
    return () => observer.disconnect();
  }, [ref, callback, options]);
}

Mutation Observer: Watching the DOM for Changes

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)

Basic Usage

Practical Use Cases

1. Auto-Initialize Components

2. Content Change Detection

3. Resize Detection (Before ResizeObserver)

Performance Tips

React Integration