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

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
});

скрипка

Из документации

поддерево: установите в значение true, если наблюдаются мутации не только цели, но и потомков цели.

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

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

ПРИМЕЧАНИЕ. По крайней мере для childList, attribute или characterData должно быть установлено значение true. В противном случае выдается ошибка "Неверная или недопустимая строка".