使用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触发下一个元素更快）将其删除到 a 的监视元素MutationObserver，则观察者会注意到并mutation为 theaddedNode和 the添加 a removedNode- 但正如您所注意到的，引用的元素不会有父节点。

更新了示例 请参阅小提琴

使用您的MutationObserverfrom op，以下代码将调用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)