监听div样式变化-MutationObserver

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品,该功能是DOM3 Events规范的一部分。


构造函数

MutationObserver()

创建并返回一个新的MutationObserver它会在指定的DOM发生变化时被调用。


disconnect()

阻止 MutationObserver实例继续接收的通知,直到再次调用其observe()方法,该观察者对象包含的回调函数都不会再被调用。

observe()

配置MutationObserver在DOM更改匹配给定选项时,通过其回调函数开始接收通知。

takeRecords()

从MutationObserver的通知队列中删除所有待处理的通知,并将它们返回到MutationRecord对象的新Array中。


实例:

// 选择需要观察变动的节点

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();

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容