Detect changes in the DOM

javascript

mutation-observer

dom-changes

performance-optimization

byAlex Kataev·Feb 4, 2025

Go with MutationObserver API for efficient, real-time detection of changes in the DOM. Set up an observer to survey your target element while specifying the types of mutations (such as changes in attributes or child lists) that will trigger a callback function.

const target = document.querySelector('#unicorn');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // Whoa! A wild mutation appeared!
    console.log(`${mutation.type} just happened. Gotta catch 'em all!`);
  });
});

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

This way, a guard is set on your '#unicorn' element, logging any changes in its attributes or changes in its child elements.

MutationObserver in-depth

Understanding the MutationObserver API helps to efficiently detect and process changes in DOM structure. Tailoring the observer to your requirements is key.

Calibrate your observer

Choose which changes to monitor by using options within the observer's configuration:

childList: Detects whether child elements have been added or removed.
attributes: Listens for changes in the attributes of the element.
subtree: Watches the target and its descendants.

Performance optimization can be achieved by reducing the scope of the observer and targeting specific mutations.

Dealing with DOM mutations

In circumstances where you need to act upon detection of new elements, the callback function becomes very handy.

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach((newNode) => {
        // Handled with a touch of unicorn magic 🦄
        // Initialize or process newNode
        // console.log('Behold, a newNode has spawned!');
      });
    }
  });
});

Capitalize on resources and plugins such as jquery.initialize which abstract managing these mutations.

Stop observing when needed

For clean-up tasks and to avoid unnecessary processing, disconnect from the observer when it's no longer needed.

observer.disconnect();
// Observer has left the chat

Always do a browser compatibility check, as MutationObserver is supported on IE11+, Firefox, and Webkit browsers.

Old school fallbacks for legacy browsers

MutationObserver might not always be supported. In such instances, resort to tried and true techniques such as onpropertychange or an interval check using getElementsByTagName("*") to mimic this behavior.

Keeping performance in check

Constant monitoring can affect performance, especially for large-scale DOMs. Perform occasional clean-ups by restricting the observer's scope and halting it with disconnect() when it's not needed.

Creation of custom DOM change APIs

For those bespoke requirements, consider developing a custom DOM change detection API. You can couple this API with custom events and higher-level abstractions for a user-friendly developer experience.

explain-codes / Javascript / Detect changes in the DOM

Linked

Performance of MutationObserver to detect nodes in entire DOM



How to wait until an element exists?



Is there a JavaScript / jQuery DOM change listener?



Execute function after complete page load



Event detect when css property changed using jQuery

