Mutation Observer 监视 DOM 变动
最后更新于：2022-04-02 03:26:10
[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`。
';