使用window.MutationObserver 监听 元素属性class 变化

window.MutationObserver(callback)

该接口用来观察节点变化,MutationObserver是一个构造器,接收一个回调函数callback用来处理节点变化时所做的操作。
var observe = new MutationObserver(mutationCallback);
MutationObserver对象有三个方法,分别如下:

observe:设置观察目标,接受两个参数:target:观察目标,config:设置观察选项

var observe = new MutationObserver(mutationCallback);
observe.observe(dom, config);// 后面介绍config的配置

disconnect:阻止对目标节点的监听。

var observe = new MutationObserver(mutationCallback);
observe.disconnect();

takeRecords:取出记录队列中的记录。它的一个作用是当你不想对节点变化立刻做出反应,过段时间再显示改变了节点的内容。

var observe = new MutationObserver(mutationCallback);
var record = observe.takeRecords();

config配置(只介绍常用的几个):

let config = {
    attributes: true, //目标节点的属性变化
    childList: true, //目标节点的子节点的新增和删除
    characterData: true, //如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化
    subtree: true, //目标节点所有后代节点的attributes、childList、characterData变化
};

示例

if (window.MutationObserver) {
      var observer = new MutationObserver(function(mrs) {
        if (mrs[0].attributeName == 'class') {
          let classStr = $('html')[0].getAttribute('class');
          let classArr = classStr ? classStr.split(' ') : [];
          classArr = classArr.filter(item => item);
          
        }
      });
      observer.observe($('html')[0], {
        attributes: true,
      });
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容