JAVASCRIPT

mutation observer js

const observer = new MutationObserver(list => {
    console.log('mutation list', list);
});
observer.observe(document.body, {
    attributes: true,
    childList: true,
    subtree: true
});
// perform any DOM change action in your page. e.g. show/hide/remove

javascript mutation observer

var fnCallback = function (mutations) {
    mutations.forEach(function (mutation) {
        alert(mutation.target.id, "added: " + mutation.addedNodes.length + " nodes");
        alert(mutation.target, "removed: " + mutation.removedNodes.length + " nodes");
    });
};

var observer = new MutationObserver(fnCallback),
        elTarget = document.querySelector("#divTarget"),
        objConfig = {
            childList: true,
            subtree : true,
            attributes: true, 
            characterData : true,
            attributeFilter : ['style', 'id'],
            attributeOldValue : true
        };

    observer.observe(elTarget, objConfig);
    
    
    
    
    
    
    
//below here is just the test code    
var btnUpdate = document.querySelector("#btnUpdate"),
    fnHandler = function () {
        elTarget.innerHTML = "<h2>New content</h2>";
    };
    
    btnUpdate.addEventListener("click", fnHandler, false);

mutation observer

  var composeObserver = new MutationObserver(function(mutations){ 
    mutations.forEach(function(mutation){
      console.log("MUTATE:", mutation)
    });
});


  function addObserverIfDesiredNodeAvailable() {
    console.log('calling')
    var composeBox = document.querySelector(".title");
    console.log("compose box: ", composeBox);
    if(!composeBox) {
        //The node we need does not exist yet.
        //Wait 500ms and try again
        window.setTimeout(addObserverIfDesiredNodeAvailable,500);
        return;
    }
    var config = {childList: true};
    composeObserver.observe(composeBox,config);
}
addObserverIfDesiredNodeAvailable();