js dom 观察者属性 MutationObserver

MDN上说的很清楚

MutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力.该API设计用来替换掉在DOM3事件规范中引入的Mutation事件

config

childList	观察目标节点的子节点(增, 删),则设置为true.

attributes	观察目标节点的属性节点(增，删,改)设为true.

characterData	如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化,则设置为true.

subtree	观察目标节点所包含的整棵DOM树上的上述三种节点变化,则设置为true.

attributeOldValue

在attributes属性已经设为true的前提下,如果需要将发生变化的属性节点之前的属性值记录下来(记录到下面MutationRecord对象的oldValue属性中),则设置为true.

characterDataOldValue	在characterData属性已经设为true的前提下,如果需要将发生变化的characterData节点之前的文本内容记录下来(记录到下面MutationRecord对象的oldValue属性中),则设置为true.

attributeFilter	一个属性名数组(不需要指定命名空间),只有该数组中包含的属性名发生变化时才会被观察到,其他名称的属性发生变化后会被忽略.

// 有兼容的话 需要调整兼容性

    var MutationObserver = window.MutationObserver;

    // 需要观察的节点

    var ele = document.querySelector('.a');

    // // 创建观察者对象

    var observer = new MutationObserver(function(MutationRecord, target) {

      // 指定的DOM节点(目标节点)发生变化时被调用

      MutationRecord.forEach(function(mutation) {

        console.log(mutation);

      });

    });

    // 配置观察选项:

    var config = {

      attributes: true,// 观察属性

      childList: true,// 观察子节点

      characterData: true, // characterData节点

      attributeOldValue: true, // 记忆上一次的atrr值

    }

    // 当前观察者对象注册需要观察的目标节点

    // config 指定要观察的DOM变化类型.

    observer.observe(ele, config)

    // 你还可以停止观察

    // observer.disconnect();

    // 添加一个 title属性

    ele.title = 'hello world'

    ele.title = 'hello alone'

    // 修改子节点

    ele.innerHTML += ' ajanuw'

巴特西

js dom 观察者属性 MutationObserver

MDN上说的很清楚

config

最新文章

热门文章