Observe element mutations

OSCC · JavaScript, Browser, Event · Oct 22, 2020

Creates a new MutationObserver and runs the provided callback for each mutation on the specified element.

  • Use a MutationObserver to observe mutations on the given element.
  • Use Array.prototype.forEach() to run the callback for each mutation that is observed.
  • Omit the third argument, options, to use the default options (all true).
const observeMutations = (element, callback, options) => {
  const observer = new MutationObserver(mutations =>
    mutations.forEach(m => callback(m))
        childList: true,
        attributes: true,
        attributeOldValue: true,
        characterData: true,
        characterDataOldValue: true,
        subtree: true,
  return observer;
const obs = observeMutations(document, console.log);
// Logs all mutations that happen on the page
// Disconnects the observer and stops logging mutations on the page

Recommended snippets

  • Handle click outside

    JavaScript, Browser

    Runs the callback whenever the user clicks outside of the specified element.

  • Adds an event listener to an element that will only run the callback the first time the event is triggered.

  • Handle scroll stop

    JavaScript, Browser

    Runs the callback whenever the user has stopped scrolling.