简单的给MutationObserver做个测试及总结笔记。

MutationObserver，window上的一个(构造)函数，可以通过其创建的观察者(观察对象)达到观察DOM的变化的效果。

可适用的需求：开发者在DOM变化过程中的debug、根据页面变化处理不同的资源、拦截网页是否被注入动态内容加载的脚本等等...

简单的案例代码如下，比如观察属性变化：

<button id="J_click">click</button><div id="J_dom" data-num="1">hello</div><script>    var dom = document.getElementById('J_dom');      var domObservable = new MutationObserver(function (mutationRecord) {         console.log('mutationRecord : ', mutationRecord)     });      document.getElementById('J_click').addEventListener('click', domChange, !1);          domObservable.observe(dom, {         attributes: true,         attributeOldValue: true     })      function domChange() {         dom.setAttribute('data-num', +(dom.getAttribute('data-num')) + 1);     } </script>

点击"click"按钮，J_dom的data-num属性从0变为1。控制台输出如下MutationRecord对象列表：

MutationObserver 构造函数需要传入一个回调函数用以执行观察到DOM变化后需要做的操作，回调函数以MutationRecord对象列表作为参数。

MutationRecord对象列表

MutationRecord对象包含以下属性：

1. type，DOM变化的类型，DOM属性变化为"attributes";DOM内数据变化为"characterData";子节点树结构变化为"childList"；

2. target，如果如果type不为"childList",则代表发生变化的节点;如果type为"childList",则是被操作子节点(新增或删除)的父节点；

3. addedNodes，被观察的DOM内新增的节点列表；

4. removedNodes，被观察的DOM内移除的节点列表；

5. previousSibling，被添加或移除节点之前的兄弟节点；

6. nextSibling，被添加或移除节点之后的兄弟节点；

7. attributeName，被修改属性的属性名；