为什么不能使用 MutationObserver API 在 document.body 上观察 document.write？

Question

我在 document.body 上未能观察到 document.write。这是代码：

<script>
var observeDOM = (function(){
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
        eventListenerSupported = window.addEventListener;

    return function(obj, callback){
        if( MutationObserver ){
            // define a new observer
            var obs = new MutationObserver(function(mutations, observer){
                if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                    callback();
            });
            // have the observer observe foo for changes in children
            obs.observe( obj, { childList:true, subtree:true });
        }
        else if( eventListenerSupported ){
            obj.addEventListener('DOMNodeInserted', callback, false);
            obj.addEventListener('DOMNodeRemoved', callback, false);
        }
    }
})();

window.onload = function() {
    //console.log("dom ready");

    // Observe a specific DOM element:
    observeDOM( document.body ,function(){ 
        console.log('dom changed');
    });
}

function reload() {
    document.write("<input type=\"submit\" onclick=\"reload();\" value=\"Reload\" />");

    //var text = document.createTextNode("abc");
    //document.body.appendChild(text);
}
</script>
<body>
<input type="submit" onclick="reload();" value="Reload" />
</body>

当我点击 Reload 按钮时，没有任何记录。但是，如果我将 window.onload 中的代码更改为：

observeDOM( document ,function(){ // change first parameter to *document*
    console.log('dom changed');
});

然后点击Reload，控制台输出dom changed。谁能告诉为什么？我正在使用 Chrome v50.

Answer 1

我今天找到原因了。似乎 document.write() 用新的覆盖了旧的 document.body。由于 MutationObserver 附加到旧的 document.body，它无法观察新的 body.

上的 DOM 变化

我是这样测试的：

为什么不能使用 MutationObserver API 在 document.body 上观察 document.write？

Why can't observe document.write on document.body using MutationObserver API?

javascript

document.write

mutation-observers