Mutation Observer

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
  

  ​