美文网首页
MutationObserver

MutationObserver

作者: 李霖弢 | 来源:发表于2021-03-30 16:29 被阅读0次

用于监视DOM树的变更,可兼容到IE11
其监听回调属于微任务

// 选择需要观察变动的节点
const targetNode = document.getElementById('some-id');

// 观察器的配置(需要观察什么变动)
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后,可停止观察
observer.disconnect();

相关文章

  • dom 修改 更新

    MutationObserver MutationObserver[https://developer.mozil...

  • MutationObserver是什么?

    目录 MutationObserver概览 MutationObserver构造器 MutationObserve...

  • 不“知名”API大集合

    MutationObserver MutationObserver 是一个可以监听DOM结构变化的接口。 Muta...

  • MutationObserver

    链接:https://www.jianshu.com/p/90f042c9e42f作者:凝黛色 MutationO...

  • MutationObserver

    MutationObserver 是一个可以监听DOM结构变化的接口。 官方使用方式示例 示例引用链接 https...

  • MutationObserver

    用于监视DOM树的变更,可兼容到IE11其监听回调属于微任务

  • MutationObserver

    今天在看vue源码nextTick实现部分发现如下代码 判断可用MutationObserver的情况下赋予tim...

  • js之MutationObserver

    百度搜索 mdn MutationObserver

  • MutationObserver、IntersectionObs

    MutationObserver用于监控DOM节点的变化,如 属性变化、子节点增删改、子树的变化等 Interse...

  • MutationObserver用法

    Mutation Observer API 用来监视 DOM 变动。比如节点的增减、属性的变动、文本内容的变动。 ...

网友评论

      本文标题:MutationObserver

      本文链接:https://www.haomeiwen.com/subject/mhsghltx.html