Mutation Observer

大家新年好，2018年第一篇博客，从介绍Mutation Observer 开始。

1，
监测Dom树的变化，是对DOM3中的Mutation Event 的替代。

2，
使用示例：

    // Firefox和Chrome早期版本中带有前缀
    var MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver
    // 选择目标节点
    var target = document.querySelector('#some-id'); 
    // 创建观察者对象
    var observer = new MutationObserver(function(mutations) {  
      mutations.forEach(function(mutation) { 
        console.log(mutation.type); 
      }); 
    }); 
// 配置观察选项:
var config = { attributes: true, childList: true, characterData: true }
// 传入目标节点和观察选项
observer.observe(target, config); 
//停止观察
observer.disconnect();

3 observer 的配置项

*childLIst 观察目标节点的子节点的新增和删除。
*attributes 观察目标节点的属性节点(新增或删除了某个属性,以及某个属性的属性值发生了变化)。
*characterData 如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化
*subtree 观察目标节点的所有后代节点(观察目标节点所包含的整棵DOM树上的上述三种节点变化)

4 浏览器兼容性：
IE 11
IE edge
Chrome
FireFox等

下次再补充一下利用Mutation Observer和Mutation Event兼容到IE9的监听dom代码。

今天的分享就到这里。