parentNode是空與MutationObserver.observe（document.body的

Question

我想跟蹤一些特殊的標籤，UI組件，例如<顏色>，<日期>，因此建立和插入到DOM元素等的時候，我可以把它轉換成。真正的功能HTML塊

這裏的代碼，觀察addedNodes上document.body的

function handleAddedNodes(nodes) { 

    [].forEach.call(nodes, function(node) { 

     if (!node.tagName) 
      return; 

     //how is it possible, node.parentNode is null????? 
     if (!node.parentNode) { 
      return; 
     } 
    }); 
} 

var observer = new MutationObserver(function(mutations) { 

    mutations.forEach(function(mutation) { 

     handleAddedNodes(mutation.addedNodes); 
    }); 
}); 

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

預期它工作正常，但我也發現了一個奇怪的問題：沒有parentNode一些addedNodes（如「觀察（ document.body「表示addedNodes應該是document.body的後代，對吧？）

整個函數作爲一個大型前端項目的插件，我不知道項目如何改變DOM，設置innerHTML或appendChild（這裏的代碼太多）。它也不能被調試，因爲觀察函數是異步的，如事件，沒有函數調用堆棧。

所以我只想知道什麼可能會導致這個問題，並且 更好，如果它可以用jsFiddle 複製。

好，似乎jsFiddle可以重現此，

Answer 1

如果添加的元素，然後立即刪除一個MutationObserver的看着元（比下setImmediate快被觸發），觀察者會請注意併爲addedNode和removedNode添加一個mutation - 但正如您已經注意到所引用的元素沒有父節點。

已更新，例如 See fiddle

有了您MutationObserver從運算下面的代碼將調用三次handleAddedNodes，一旦對於附加在該刪除的元素的元素的元素多數民衆贊成被移除並且一次。被移除的元素將沒有父項，而第二個元素將有父項。

var body = document.body; 
var test = document.createElement("div"); 
var test2 = document.createElement("span"); 
body.appendChild(test);//adds childList mutation (addedNodes) 
test.appendChild(test2);//adds subtree mutation (addedNodes) 
body.removeChild(test);//adds mutation (removedNodes)