爲什麼MutationObserver代碼不能在Chrome 30上運行？

從http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers我得到了下面的代碼：爲什麼MutationObserver代碼不能在Chrome 30上運行？

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代碼？

來源

2013-10-03 weilou

是的，如果你觀察document.body，它會工作.. – PSL

@plalx我試過'新的MutationObserver'和'新的WebKitMutationObserver'。他們有相同的結果。 – weilou

@weilou，不要使用'document.querySelector（'body'）'，只需使用'document.body'。 – plalx

添加subTree選項以及它應該工作，你不僅要監視文檔的子項（head/body），但它也是後代。（這就是設置爲document.body的原因）。

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

Fiddle

從documentation

子樹：設置爲true，如果突變不只是目標，而且目標的後裔也必須得到遵守。

因此，您要添加的是document的後代，而不是其子代（或直接後代）。它是body（這就是爲什麼只提到childList和使用document.body作品）的孩子。如果要深入監視更改，則需要提及subTree。

另見註釋以及：

注意：最起碼，childList中，屬性或characterData必須設置爲true。否則，將拋出「指定了無效或非法字符串」錯誤。

來源

2013-10-03 04:04:54 PSL

@plalx號子樹是必需的，如果他想要監視身體深處的話，例如，如果他想在這個div內添加其他div。 – PSL

@plalx檢查此示例刪除子樹並嘗試。 http://jsfiddle.net/9wtDc/ – PSL

最後我加了'subtree'。現在它起作用了。感謝你們。 – weilou

爲什麼MutationObserver代碼不能在Chrome 30上運行？

回答

相關問題