JavaScript - MutationObserver

MutationObserver会在当前DOM操作完成之后被触发，与事件的同步机制不同，它是异步触发的。

========quote========

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

========quote========

使用方法：

//for Firefox(14+)、Chrome(26+)、Opera(15+)、IE(11+)和Safari(6.1+)
var MutationObserver = window.MutationObserver ||
    window.WebKitMutationObserver ||
    window.MozMutationObserver;

var mutationObserverSupport = !!MutationObserver;

//craete instance
var callback=function(records){
	//records contains all change log;
}
var observer = new MutationObserver(callback);

//observe special element
var article = document.querySelector('article');
var options = {
    'childList': true,
    'arrtibutes': true
};

observer.observer(article, options);

//clear change log
observer.takeRecord();
//stop observe
observer.disconnect();

Options:

childList：子元素的变动
attributes：属性的变动
characterData：节点内容或节点文本的变动
subtree：所有下属节点（包括子节点和子节点的子节点）的变动
想要观察哪一种变动类型，就在option对象中指定它的值为true。需要注意的是，不能单独观察subtree变动，必须同时指定childList、attributes和characterData中的一种或多种。

除了变动类型，option对象还可以设定以下属性：
attributeOldValue：值为true或者为false。如果为true，则表示需要记录变动前的属性值。
characterDataOldValue：值为true或者为false。如果为true，则表示需要记录变动前的数据值。
attributesFilter：值为一个数组，表示需要观察的特定属性（比如['class', 'str']）。

Record:

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

========