のparentNodeは、そのような要素を作成し、DOMに挿入されたときに、私はそれを変換することができ、MutationObserver.observe（document.body

Question

私はUIコンポーネントとして、いくつかの特別なタグを追跡する、例えば<色>、<日>とnullです（」観察するなど、いくつかのaddedNodesのためノーのparentNode（：。。本当の機能HTMLブロック

ここでのコードは、予想通りそれが正常に動作

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

document.bodyにaddedNodesを観察し、私も奇妙な問題を発見しましたdocument.bodyは」addedNodesは右、document.bodyの子孫でなければなりません意味？）

関数全体が大きなフロントエンドプロジェクトへのアドオンとして動作しますが、私はプロジェクトがDOMを変異させる方法がわからない、innerHTMLプロパティまたはのappendChild（ここでは、あまりにも多くのコード）がセット。機能を観察すると、イベントなどの非同期、機能なしのコールスタックであるとして、それはまた、デバッグすることができません。

だから私はちょうどこれを引き起こす可能性があることを知りたいし、 はjsFiddle で再現することができればさらに良いと思っています。

まあ、要素がすぐにその後、追加している場合は、オブザーバ、MutationObserverの注目要素に削除（次setImmediateより速いがトリガされる）

Answer 1

、jsFiddleはこれを再現することができますように見えました気づくとの両方addedNodeとremovedNodeためmutationを追加する - しかし、あなたが気づいたとして参照される要素は、親ノードを持っていません。あなたのMutationObserverで

例を更新しました See fiddle

OPから次のコードは、一度要素のために除去され、一旦除去要素に追加された要素のためにされてthatsの、handleAddedNodes 3回呼び出します。削除された要素は親を持ちませんが、2番目の要素は親を持ちます。

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)