使用MutationObserver.observe（document.body，parentNode为null）

Question

我想跟踪一些特殊的标签作为UI组件，例如<color>，<date>，所以当创建这样的元素并将其插入DOM时，我可以将它转换为真正的功能html块。

这是代码，在document.body上观察addedNodes。

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（因为“observe（document.body”表示addedNodes应该是document.body的后代，对吧？）

整个函数作为大前端项目的插件，我不知道项目如何改变DOM，设置innerHTML或appendChild（这里的代码太多）。 它也无法调试，因为observe函数是异步的，就像事件一样，没有函数调用堆栈。

所以我只想知道是什么原因造成这种情况， 如果能用jsFiddle再现它会更好 。

好吧，似乎jsFiddle可以重现这个，

Answer 1

如果添加了一个元素，然后立即（比下一个setImmediate被触发的速度快）被移除到MutationObserver的监视元素，观察者将注意到并为addedNode和removedNode添加一个mutation - 但是你已经注意到了引用element将没有父节点。

更新了示例 请参阅小提琴

使用来自op的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)