Почему в Chrome 30 не работает код MutationObserver?

Question

От http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers я получил следующий код:

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

Как вы можете видеть, мы должны увидеть предупреждение, потому что div элемент вставляется в DOM. Но, похоже, коды MutationObserver не запускаются. Как я могу успешно запустить код MutationObserver?

Answer 1

Добавить subTree вариант, он должен работать, вы хотите контролировать не только детей документа (head/body), но и потомков. (И в этом причина, когда установлено значение document.body, он работает).

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

Fiddle

От documentation

поддерево: Установите верно, если мутации не только цели, но и цели на потомков должны быть соблюдены.

Так что вы добавляете потомок document, а не его ребенка (или прямого потомка). Это ребенок body (и именно поэтому просто упоминается childList и с использованием document.body работ). Вы должны указать subTree, если вы хотите глубоко контролировать изменения.

Также см примечание, а:

Примечание: По крайней мере, childList, атрибуты, или CharacterData должен быть установлен верно. В противном случае указана «Неверная или незаконная строка».