Блог

Как я могу инициировать изменение поддерева с помощью MutationObserver?

JavaScript

 function mutate(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });
}

var target = document.querySelector('div#mainContainer');
var observer = new MutationObserver( mutate );
var config = { attributes: true, characterData: true, childList: true, subtree: true };

observer.observe(target, config);
  

HTML

 <div id="mainContainer">
    <h1>Heading</h1>
    <p>Paragraph.</p>
    <img src="http://i.stack.imgur.com/k7HT5.jpg" alt="Photo" id="photo" height="100">
</div>
  

Я могу инициировать изменение атрибута с помощью:

 document.getElementById('photo').src = 'http://i.imgur.com/Xw6htaT.jpg';
  

Я могу инициировать изменение символьных данных с помощью:

 document.querySelector('div#mainContainer p').innerHTML = 'Some other text.';
  

Я могу инициировать изменение дочернего списка с помощью:

 jQuery('div#mainContainer').append('<div class="insertedDiv">New <div>!</div>');
  

Как запускается изменение поддерева, чтобы console.log(mutation.type); распечатал его?