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

Question

我想跟踪一些特殊标签作为UI组件，例如＆lt; color＆gt;，＆lt; date＆gt;，所以当创建这样的元素并将其插入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函数是异步的，比如event，没有函数调用栈。

所以我只是想知道是什么原因造成这种情况，如果可以用jsFiddle 复制，会更好。

好吧，似乎jsFiddle可以重现这一点，

Answer 1

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

更新了示例 See fiddle

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