Biegral Blog

web api中有一个叫做MutationObserver的接口
MutationObserver接口提供了监视对DOM树所做更改的能力。
DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。
用过vue 的nextTick的就会知道，这个方法就是用到了MutationObserver
下面是一个示例

  // Firefox和Chrome早期版本中带有前缀
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
// 选择目标节点
        var target = document.querySelector('#rador');
// 创建观察者对象
        var observer = new MutationObserver(function (mutations) {
          mutations.forEach(function (mutation) {
           console.log(mutation)
          });
        });
// 配置观察选项:
        var config = {
        attributes: true,//检测属性变动
         childList: true,//检测子节点变动
         characterData: true//节点内容或节点文本的变动。
         }
// 传入目标节点和观察选项
        observer.observe(target, config);
// /停止观察
//           observer.disconnect(); 

observe方法用来启动监听，它接受两个参数。

第一个参数：所要观察的 DOM 节点
第二个参数：一个配置对象，指定所要观察的特定变动