Mutation Observer (变动观察器)
HTML5新特性，是监视DOM变动的接口，当DOM对象树发生任何变动时，Mutation Observer会得到通知
目前在IE11以上浏览器都支持这个API，safair6.0和Chrome18-25使用这个API的时候，需要加上webkit前缀，可以使用下面的表达式检查浏览器是否支持这个API
var MutationObserver =
window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver
使用如下
<button id="myelement">ADD</button>
<script>
var MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;
var mutationObserverSupport = !!MutationObserver;
var callback = function(records){
console.log('MutationObserver callback');
records.map(function(record){
console.log('Mutation type: '+ record.type, ', target: ', record.target.nodeName);
});
};
var mo = new MutationObserver(callback);
var option = {
'childList': true,
'subtree': true
};
mo.observe(document.body, option);
window.onload = init;
function init(){
if (!mutationObserverSupport) {
return;
}
var addBtn = document.getElementById('myelement'),
body = document.getElementsByTagName('body')[0];
addBtn.addEventListener('click', function(e) {
for (var i = 0, j = 100; i < j; i++) {
var p = document.createElement('p');
p.appendChild(document.createTextNode(i));
body.appendChild(p);
console.log('append child node: ' + i);
}
}, false);
}
</script>
我们来解释一下上面的代码
options是配置参数，通过配置options我们可以决定来观察元素哪一方面的变化，options的选项如下
childList：子元素的变动
attributes：属性的变动
characterData：节点内容或节点文本的变动
subtree：所有下属节点的变动
attributeOldValue：值为true或则false，表示是否记录发生变化的属性节点之前的属性值
characterDataOldValue：值为true或者false，表示是否记录发生变化之前的文本内容记录下来
attributeFilter：一个属性名数组，只有该数组中包括的属性名发生变化才会被观察到，其它名称的属性发生变化则会被忽略
DOM对象每次发生变动，就会生成一条变动记录，回调函数会将变动记录MutationRecord对象传入，MutationRecord包含了DOM的相关信息，有以下属性
type：变动的类型(attribute,characterData,childList)
target：发生变动的DOM对象
addedNodes：新增的DOM对象
removeNode：删除的DOM对象
previousSibling：前一个同级的DOM对象，没有则返回null
nextSibling：下一个同级的DOM对象，没有则返回null
attributeName：发生变动的属性，如果设置了attributeFilter，则只返回预先指定的属性
oldValue：变动前的值，这个属性只对attribute和characterData变动有效。如果childList发生了变动，则返回null
Mutation Observer是异步触发，也就是说，当DOM发生变动以后，并不会马上触发，而是要等到当前所有的DOM操作都结束后才触发，举例来说，如果在文档中连续插入n个p标签，那么只会在这写p标签全部插入结束后才触发，而且只会触发一次，它会将DOM变动记录封装成一个数组进行处理，而不会去单独处理个别DOM变动
还有两个方法
-
disconnect方法用来停止观察，发生相应变动时，不再调用回调函数
observer.disconnect() -
takeRecord方法用来清除变动记录，也就是说不在处理未处理的变动
observer.takeRecord
