Mutation Observers (forked from stopsatgreen/p4DbR/)

by sanford

HTML

<div class="foo">
    <p>Target</p>
</div>
<button id="attr">Change attribute</button>
<button id="kids">Change children</button>
<button id="data">Change data</button>

JavaScript

/*
Mutation observers demo.
Results are logged to the console.
Requires IE11 or other modern browser.
Polyfill IE9, IE10: https://github.com/Polymer/MutationObservers
*/

var el = document.querySelector('div'),
    changeAttr = document.getElementById('attr'),
    changeData = document.getElementById('data'),
    changeKids = document.getElementById('kids');

var observer = new MutationObserver( function (mutations) {
    mutations.forEach( function (mutation) {
        console.log(mutation);
    });
});

var config = {
    attributes: true,
    attributeOldValue: true,
    childList: true,
    characterData: true,
    subtree: true
};

observer.observe(el, config);

function disable (elTarget) {
    elTarget.setAttribute('disabled',true);
}

changeAttr.addEventListener('click', function (ev) {
    el.classList.add('bar');
    disable(changeAttr);
});

changeData.addEventListener('click', function (ev) {
    el.querySelector('p').firstChild.replaceData(0, 6, 'Data changed');
    disable(changeData);
});

changeKids.addEventListener('click', function (ev) {
    var newP = document.createElement('p');
    newP.textContent = 'New target';
    el.appendChild(newP);
    disable(changeKids);
});