MutationObserver Tinkering

by acbabis

HTML

<div id="some-id">TEXT</div>
<form id="form">
    <input id="text" type="text"/>
    <input id="button" type="submit" value="Update"/>
</form>
<ul id="list"></ul>

JavaScript

// select the target node
var target = document.querySelector('#some-id');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
    console.log('MUTATION', this);
    mutations.forEach(function(mutation) {
        var li = document.createElement('li');
        li.innerHTML = mutation.type;
        document.getElementById('list').appendChild(li);
    });    
});
 
// 'subtree: true' allows recursive triggering?
var config = { attributes: true, childList: true, characterData: true, subtree: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);
 
//observer.disconnect(); // later, you can stop observing

document.getElementById('some-id').setAttribute('class', 'asdf');
document.getElementById('form').addEventListener('submit', function(event) {
    document.getElementById('some-id').innerHTML = document.getElementById('text').value;
    event.preventDefault();
});