[TOC] ## 概述 * 它等待所有脚本任务完成后，才会运行（即异步触发方式）。 * 它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。 * 它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。 ## 构造函数 ``` var observer = new MutationObserver(function (mutations, observer) { mutations.forEach(function(mutation) { console.log(mutation); }); }); ``` 参数一是变动数组，参数二是观察器实例 ## 实例 ### observe() * 第一个参数：所要观察的 DOM 节点 * 第二个参数：一个配置对象，指定所要观察的特定变动 ```. var article = document.querySelector('article'); var options = { 'childList': true, 'attributes':true } ; observer.observe(article, options); ``` option选项: * `childList`*：子节点的变动（指新增，删除或者更改）。 * `attributes`：属性的变动。 * `characterData`：节点内容或节点文本的变动。 * `subtree`：布尔值，表示是否将该观察器应用于该节点的所有后代节点。 * `attributeOldValue`：布尔值，表示观察`attributes`变动时，是否需要记录变动前的属性值。 * `characterDataOldValue`：布尔值，表示观察`characterData`变动时，是否需要记录变动前的值。 * `attributeFilter`：数组，表示需要观察的特定属性（比如`['class','src']`）。 多次添加同一个观察器是无效的，回调函数依然只会触发一次。但是，如果指定不同的`options`对象，就会被当作两个不同的观察器 ### disconnect() 停止观察 `observer.disconnect(); ` ### takeRecords 清楚变动记录 返回变动记录的数据 `observer.takeRecords(); ` 清除变动记录 ``` // 保存所有没有被观察器处理的变动 var changes = mutationObserver.takeRecords(); // 停止观察 mutationObserver.disconnect(); ``` ## MutationRecord 对象 * `type`：观察的变动类型（`attributes`、`characterData`或者`childList`）。 * `target`：发生变动的DOM节点。 * `addedNodes`：新增的DOM节点。 * `removedNodes`：删除的DOM节点。 * `previousSibling`：前一个同级节点，如果没有则返回`null`。 * `nextSibling`：下一个同级节点，如果没有则返回`null`。 * `attributeName`：发生变动的属性。如果设置了`attributeFilter`，则只返回预先指定的属性。 * `oldValue`：变动前的值。这个属性只对`attribute`和`characterData`变动有效，如果发生`childList`变动，则返回`null`。