HTML5 MutationObserver简介

概述

  MutationObserver接口提供了监视对DOM树所做更改的能力，当DOM对象树发生任何变动时，MutationObserver会得到通知。
  可以理解为，当DOM发生变动会触发MutationObserver事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说DOM发生变动立刻会触发相应的事件；MutationObserver则是异步触发，DOM发生变动以后，并不会马上触发，而是要等到当前所有DOM操作都结束后才触发。

Mutation Observer有以下特点：

• 它等待所有脚本任务完成后，才会运行，即采用异步方式
• 它把DOM变动记录封装成一个数组进行处理，而不是一条条地个别处理DOM变动。
• 它即可以观察发生在DOM节点的所有变动，也可以观察某一类变动

兼容性：

Firefox(14+)、Chrome(26+)、Opera(15+)、IE(11+)和Safari(6.1+)支持这个API。Safari 6.0和Chrome 18-25使用这个API的时候，需要加上WebKit前缀

[外链图片转存失败(img-Wky87jd9-1564042563043)(./img/MutationObserverSupport.png)]

如何使用

首先使用构造函数，创建一个MutationObserver的实例，同时指定该实例的回调函数。

var observer = new MutationObserver(callback);

方法有：

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

  mutationObserver.disconnect()
  

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

  // 语法： mutationObserver.observe(target[, options])
  
  let dom = document.querySelector('dom');
  let options = {
      'attributes': true
  };
  observer.observe(dom, options);
  

  option配置项：

  • childList: 设为true则监视添加或删除新的子节点变动。
  • attribute: 设为true则监视元素属性值的变动。
  • characterData: 设为true则监听节点或子节点文本内容的变动。
  • subtree：设为true则监视范围到目标节点下的整个子树的所有节点。不可单独监视，必须同时指定childList、attributes和characterData中的一种或多种。

  除了变动类型，option对象还可以设定以下属性：

  • attributeOldValue：设为true则表示需要记录变动前的属性值。
  • characterDataOldValue：设为true则表示需要记录变动前的数据值。
  • attributesFilter：设为true则表示需要观察的特定属性（比如[‘class’, ‘str’]）。

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

  mutationRecords = mutationObserver.takeRecords()
  

MutationRecord对象
  DOM对象每次发生变化，就会生成一条变动记录。这个变动记录对应一个MutationRecord对象，该对象包含了与变动相关的所有信息。MutationObserver进行处理的一个个变动对象所组成的数组。
MutationRecord对象包含了DOM的相关信息，有如下属性：

• type:观察的变动类型（attribute、characterData或者childList）。
• target:发生变动的DOM对象。
• addedNodes:新增的DOM对象。
• removeNodes:删除的DOM对象。
• previousSibling:前一个同级的DOM对象，如果没有则返回null。
• nextSibling:下一个同级的DOM对象，如果没有就返回null。
• attributeName:发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
• oldValue:变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。

实例

let MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;

let cb = (records) => {
    records.map(function(record) {
        console.log('Mutation type: ' + record.type);
        console.log('Mutation target: ' + record.target);
    });
};

let observer = new MutationObserver(cb);
let dom = document.querySelector('dom');
let options = {
    'attributes': true
};

observer.observe(dom, options);

今天的文章HTML5 MutationObserver简介分享到此就结束了，感谢您的阅读。