Javascript – observe DOM modifications for any element on website

Warning: Undefined variable $time_difference in /usr/home/smartgroup/domains/blog.tulikowski.com/public_html/wp-content/plugins/similarity/similarity.php on line 324 Warning: Undefined array key 0 in /usr/home/smartgroup/domains/blog.tulikowski.com/public_html/wp-content/plugins/similarity/similarity.php on line 336 Warning: Undefined variable $time_difference in /usr/home/smartgroup/domains/blog.tulikowski.com/public_html/wp-content/plugins/similarity/similarity.php on line 324 Warning: Undefined array key 0 in /usr/home/smartgroup/domains/blog.tulikowski.com/public_html/wp-content/plugins/similarity/similarity.php on line 336

Here is the simple code snippet which allows to observe any DOM modifications for the element on the page. It can be used to check if any asynchronous update was made to the selected part of website.

var observeDOM = (function(){
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

  return function( obj, callback ){
    if( !obj || !obj.nodeType === 1 ) return; // validation

    if( MutationObserver ){
      // define a new observer
      var obs = new MutationObserver(function(mutations, observer){
          callback(mutations);
      });
      // have the observer observe foo for changes in children
      obs.observe( obj, { childList:true, subtree:true });
    }
    
    else if( window.addEventListener ){
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

var element = document.querySelector(".element-class");

observeDOM(element, function() {console.log("Element modification")});