watchmydom

A Javascript library to watch DOM changes

Download GitHub

Add elements/attributes to see the changes in console,

Add div Add span Add text Add class Stop Watching Start Watching

Dom changes,

Clear

Console

Clear

Source Code

var domResults = {};

/* watchMyDom call*/
domResults = new watchMyDom('.dom-results')

/* Watching */
domResults.watch(function(result, info){
    result.output.forEach(function(e){
        if(e.addedNodes != undefined){
            $('.results-1').append('<div> Added a '  + $(e.addedNodes)[0].nodeName + '</div>')
        }
        else if(e.removedNodes != undefined){
            $('.results-1').append('<div> Removed a ' + e.removedNodes.nodeName + '</div>')
        }
        else{
            $('.results-1').append('<div> Updated attribute ' + e.addedAttributes.nodeName + '</div>')
        }
    })
})