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。