mutation observer

by Luis Martin

HTML

<h1 class="prueba" id="prueba">
PRUEBA
</h1>

JavaScript

const config = {
  
  attributes: true, // attribute changes will be observed | on add/remove/change attributes
  attributeOldValue: true, // will show oldValue of attribute | on add/remove/change attributes | default: null
  
  characterData: true, // data changes will be observed | on add/remove/change characterData
  characterDataOldValue: true, // will show OldValue of characterData | on add/remove/change characterData | default: null
  
  childList: false, // target childs will be observed | on add/remove
  subtree: false, // target childs will be observed | on attributes/characterData changes if they observed on target
  
  attributeFilter: ['class'] // filter for attributes | array of attributes that should be observed, in this case only style
  
};

function subscriber(mutations) {
  mutations.forEach((mutation) => {
    // handle mutations here
    console.log(mutation);
  });
}

// instantiating observer
const observer = new MutationObserver(subscriber);

// observing target
observer.observe(document.getElementById("prueba"), config);