Perché il codice MutationObserver non viene eseguito su Chrome 30?

Question

Da http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers ho ottenuto il seguente codice:

var insertedNodes = []; 
var observer = new WebKitMutationObserver(function(mutations) { 
alert('run'); 
mutations.forEach(function(mutation) { 
    for (var i = 0; i < mutation.addedNodes.length; i++) 
    insertedNodes.push(mutation.addedNodes[i]); 
}) 
}); 
observer.observe(document, { childList: true }); 
console.log(insertedNodes); 

var divElement = document.createElement('div'); 
divElement.innerHTML = 'div element'; 
document.querySelector('body').appendChild(divElement); 

jsFiddle: http://jsfiddle.net/cUNH9

Come si può vedere, si dovrebbe vedere un allarme perché un elemento div viene inserito al DOM. Ma sembra che i codici MutationObserver non vengano eseguiti. Come posso eseguire correttamente il codice MutationObserver?

Answer 1

Aggiungi l'opzione subTree, dovrebbe funzionare, si desidera monitorare non solo i figli del documento (head/body) ma anche i discendenti. (E questo è il motivo quando è impostato su document.body funziona).

observer.observe(document, { 
    attributes: true, 
    childList: true, 
    characterData: true, 
    subtree:true 
}); 

Fiddle

Da documentation

sottostruttura: impostare a true mutazioni non solo bersaglio, ma anche di indirizzare i discendenti sono da osservare.

Quindi quello che si sta aggiungendo è un discendente di document non figlio (o diretto discendente). È un figlio di body (ed è per questo che menzionare solo childList e utilizzare document.body funziona). È necessario menzionare subTree se si desidera monitorare in profondità le modifiche.

veda anche la nota così:

NOTA: Per lo meno, childList, attributi, o CharacterData deve essere impostata su true. In caso contrario, viene generato un errore "Una stringa non valida o illegale è stata specificata".