使用MutationObserver.observe(document.body,parentNode为null)

 手机用户2602906645 发布于 2023-02-10 11:01

我想跟踪一些特殊的标签作为UI组件,例如,,所以当创建这样的元素并将其插入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可以重现这个,

在此输入图像描述

撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有