HTML5 MutationObservers

by yoni sidi

HTML

<div id="target"></div>
<button id="addChild" type="button">Add Child</button>
<button id="removeChild" type="button">Remove Child</button>
<button id="changeAttr" type="button">Change Attribute</button>

CSS

#target {
    width: 120px;
    height: 120px;
    border: 1px solid lightblue;
    padding: 1px;
}

.child {
    float: left;
    width: 10px;
    height: 10px;
    background: lightgreen;
    margin: 1px;
}

JavaScript

var target = document.getElementById("target");

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation.type + ":" , mutation);
    });
});

observer.observe(target, { 
    childList: true, 
    attributes: true, 
    characterData: true, 
    subtree: true,
    attributeOldValue: true,
    characterDataOldValue: true
});

var addChild = document.getElementById("addChild");
var removeChild = document.getElementById("removeChild");
var changeAttr = document.getElementById("changeAttr");

addChild.addEventListener("click", function() {
    var child = document.createElement("div");
    child.className = "child";
    target.appendChild(child);
});

removeChild.addEventListener("click", function() {
    var child = target.querySelector(".child");
    target.removeChild(child);
});

jQuery('.child').click(function(){
    this.style.backgroundColor = randomColor();
});

changeAttr.addEventListener("click", function() {
    var child = target.querySelector("div:nth-child(2)");
    child.style.backgroundColor = randomColor();
});

function randomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}