MutationObserver|MDN 文档

MutationObserver接口提供了监视对DOM树所做更改的能力。

在DOM元素的属性以及结构发生改变会调用MutationObserver的构造函数。用来替换原有的Mutation Events功能，是DOM3 Events规范新增的功能。

构造函数 MutationObserver

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

在observe()中绑定的元素发生改变后会调用MutationObserver构造函数。

MutationObserver会创建并且返回一个新的观察者，MutationObserver对DOM元素的观察并不会立即启动，必须调用observe()方法来确定观察的DOM元素，以及要相应那些内容。

语法

var observer = new MutationObserver(callback);

参数

callback

回调函数，每当被指定节点或子树以及配置项中的DOM变动时会callback会被调用。回调函数callback拥有两个参数，一个是描述被修改的MutationRecord 对象数组，另一个是调用该函数的MutationObserver对象

返回值

一个新的、包含监听 DOM 变化回调函数的 MutationObserver 对象。

function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch(mutation.type) {
      case 'childList':
        /* 从树上添加或移除一个或更多的子节点；参见 mutation.addedNodes 与
           mutation.removedNodes */
        break;
      case 'attributes':
        /* mutation.target 中某节点的一个属性值被更改；该属性名称在 mutation.attributeName 中，
           该属性之前的值为 mutation.oldValue */
        break;
    }
  });
}

var observer = new MutationObserver(callback);

调用observer()即可开始观察DOM。当观察者observer发现被观察的DOM元素的指定的配置项的更改时，callback()方法就会被调用。

使用mutation.type可以获取发生变动类型(不论是子节点发生改变[childList]，还是属性发生改变[attributes])。

方法

disconnect()

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

调用disconnect()会立即阻止观察者继续接收通知，观察者包含的回调函数不会继续执行，要想使回调函数继续执行，必须再次使用observer()配置被监听的DOM元素及相关配置。

语法

mutationObserver.disconnect()

返回值

undefined

所有已经检测到但是尚未向观察者报告的变动都会被丢弃。

如果被观察的元素从DOM中移除，被垃圾回收机制释放，这个观察者也会被删除。

也就是说，被观察的元素被垃圾回收机制释放的话，可以不进行手动删除观察者。

observe()

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

语法

mutationObserver.observe(target[, options])

参数

target

DOM树中的一个被观察的DOM节点(可能是Node，也可能是Element)，或者是被观察子节点的根节点。

options [可选]

可选的MutationObserverInit 对象，这个对象的配置项描述了DOM的那些变化应该提供给当前观察者的callback。

返回值

undefined

takeRecords()

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