H5新特性Mutation Observer使用场景

H5新增的一个特性Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。他与对象事件的区别是事件是同步触发的，而Mutation Observer则是异步触发，DOM发生变动以后，并不会马上触发，而是要等到当前所有DOM操作都结束后才触发。

目前支持Mutation Observer的浏览器有：Firefox(14+)、Chrome(26+)、Opera(15+)、IE(11+)和Safari(6.1+)，可通过如下代码来检测：

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

var mutationObserverSupport = !!MutationObserver;//true则支持

使用：

var observer = new MutationObserver(callback);//构造实例并指定回调函数
var article = document.querySelector('article');

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

observer.observer(article, options);//实现监听

MutationObserver所观察的DOM变动（即上面代码的option对象），包含以下类型：

• childList：子元素的变动
• attributes：属性的变动
• characterData：节点内容或节点文本的变动
• subtree：所有下属节点（包括子节点和子节点的子节点）的变动

想要观察哪一种变动类型，就在option对象中指定它的值为true。需要注意的是，不能单独观察subtree变动，必须同时指定childList、attributes和characterData中的一种或多种。

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

• attributeOldValue：值为true或者为false。如果为true，则表示需要记录变动前的属性值。
• characterDataOldValue：值为true或者为false。如果为true，则表示需要记录变动前的数据值。
• attributesFilter：值为一个数组，表示需要观察的特定属性（比如['class', 'str']）。

disconnect方法用来停止观察。发生相应变动时，不再调用回调函数：observer.disconnect();

takeRecord方法用来清除变动记录，即不再处理未处理的变动：observer.takeRecord();

MutationRecord对象

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

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。

应用实例：检测对象的属性变动：

var callback = function(records) {
    records.map(function(record) {
        console.log('Previous attribute value: ' + record.oldValue);
    });
};

var mo = new MutationObserver(callback);

var element = document.getElementById('#my_element');

var option = {
    'attribute': true,
    'attributeOldValue': true
};

mo.observer(element, option);