MutationObserver接口用来监视DOM树的更改，DOM树的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个API都能得到通知。

MutationObserver是在DOM4中定义，被设计用来替代在DOM3 Events规范中定义的MutationEvent接口。

注：Mutation Observer 是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束后才触发。这样设计是为了应付 DOM 频繁变动的特点，举例来说，如果文档中连续插入1000个<div>元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 不同，它只在1000个<div>都插入结束后才会触发，而且只触发一次。

MutationEvent

该接口已经被废弃，不再推荐使用。尽管有些浏览器可能仍然支持它，但它可能已经从相关的Web标准中删除，可能正在被删除，或者可能只是出于兼容性目的而保留。

MutationEvent事件列表

总共有7种事件类型：

• DOMAttrModified
• DOMAttributeNameChanged
• DOMCharacterDataModified
• DOMElementNameChanged
• DOMNodeInserted
• DOMNodeInsertedIntoDocument
• DOMNodeRemoved
• DOMNodeRemovedFromDocument
• DOMSubtreeModified

MutationEvent使用

可以使用EventTarget.AddEventListener（）为Mutation Event注册侦听器，如下所示：

element.addEventListener("DOMNodeInserted", function (event) {
  // ...
}, false);

MutationObserver

MutationObserver()是一个构造器，接受一个callback参数，用来处理节点变化的回调函数，返回两个参数，mutations：节点变化记录列表（sequence），observer：构造MutationObserver对象。

var observe = new MutationObserver(function(mutations, observer){
});
var el = document.querySelector('#app');
var  options = {
  'childList': true,
  'attributes':true
} ;
observer.observe(el, options);
// 创建并返回一个 MutationObserver 实例， 并侦听el元素的变动。

MutationObserver 的实例方法

observe()

指定所要观察的DOM元素，以及要观察的特定变动，启动监听。

var el = document.querySelector('#app');

var  options = {
  'childList': true,
  'attributes':true
} ;

observer.observe(el, options);

该方法的第二个参数有如下可选属性

disconnect()

停止 MutationObserver 实例对DOM变动的侦听，除非再次调用其observe()方法。

observer.disconnect();

takeRecords()

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

// 保存所有没有被观察器处理的变动
var records = mutationObserver.takeRecords();

// 停止观察
mutationObserver.disconnect();

MutationRecord 对象

DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。

MutationRecord对象包含了DOM的相关信息，有如下属性：