美文网首页
使用window.MutationObserver 监听 元素属

使用window.MutationObserver 监听 元素属

作者: 源大侠 | 来源:发表于2023-04-22 09:48 被阅读0次

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,
      });
    }

相关文章

  • DOM事件委托

    使用场景 监听重复的事件===>用于节省监听数(内存小) 监听当前暂时还没有的元素===>动态监听元素 使用方法

  • Vue 下拉刷新数据

    思路 使用directives来绑定监听元素 通过el获取到元素,添加监听事件 在回调中写对滚动事件的处理 数据的...

  • border-radius元素overflow:hidden失效

    父元素使用border-radius和overflow:hidden做成圆形,子元素如果使用了transform属...

  • MUI框架—事件管理

    事件绑定 除了可以使用 addEventListener() 方法监听某个特定元素上的事件外,也可以使用 .on(...

  • swiper 在vue中使用

    每次数据或者元素更新后可以使用observer:true, observeParents:true, 进行监听 以...

  • Vue: 怎么去兼容JS、JQuery插件

    来由:使用 clipboardjs 实现点击复制文字,clipboardjs 需要先对指定元素绑定事件监听: 如果...

  • useInViewport

    简介 1 .观察元素是否在可见区域2 .使用场景: 3 .传统实现:监听scroll事件,调用目标元素的getBo...

  • 事件

    题目1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0级在事件监听上的使用方式是先取出元素...

  • Angular4通过Directive实现入场动画

    通过Directive实现入场动画 创建指令并引入所需 使用HostListener为宿主元素添加window监听...

  • 前端面试题——事件代理 delegate 的实现(一)

    当我们需要监听某个元素被点击的时候,我们会给这个元素添加事件监听器 事件监听器只会绑定到当前 DOM 中已有的元素...

网友评论

      本文标题:使用window.MutationObserver 监听 元素属

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