基础篇：MutationObserver 对象
MutationObserver 提供监视 DOM 树更改的能力，例如节点增减、属性变动、文本内容变动。它属于 WHATWG DOM 标准，用来替代已废弃的 Mutation Events（后者才是 DOM3 Events 里的旧机制）。
概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。
Mutation Observer 有以下特点：
- 等待所有脚本任务完成后，才会运行（即异步触发方式）。
- 把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。
- 既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。
构造函数
MutationObserver() 构造函数创建并返回一个新的观察器，它会在 DOM 变化时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。
const observer = new MutationObserver(callback);
callback 是一个回调函数，在指定的节点或子树以及配置项有 DOM 变动时会被调用。回调函数拥有两个参数：一个是描述所有被触发改动的 MutationRecord 对象数组，另一个是调用该函数的 MutationObserver 对象。
const observer = new MutationObserver(function callback (mutationList, mObserver) {
mutationList.forEach((mutation) => {
switch(mutation.type) {
case 'childList':
console.log('从树上添加或移除一个或更多的子节点')
break;
case 'attributes':
console.log('节点的一个属性值被更改')
break;
}
});
});
observer.observe(document.body, {
childList: true, // 观察目标子节点的变化，是否有添加或者删除
attributes: true, // 观察属性变动
subtree: true // 观察后代节点，默认为 false
});
方法
observe()
配置了 MutationObserver 对象的回调方法以开始接收与给定选项匹配的 DOM 变化的通知。根据配置，观察者会观察 DOM 树中的单个 Node，也可能会观察被指定节点的部分或者所有的子孙节点。
要停止 MutationObserver（以便不再触发它的回调方法），需要调用 MutationObserver.disconnect() 方法。
mutationObserver.observe(target[, options])
target： DOM 树中的一个要观察变化的 DOM 节点（可能是一个 Element），或者是被观察的子节点树的根节点。
options：描述 DOM 的哪些变化应交给当前观察者的回调。实践中必须传入，且
childList、attributes、characterData至少有一个为true，否则会抛错。- childList（可选）：是否监视目标节点（若
subtree为 true，则含子孙节点）添加或删除子节点，默认false。 - attributes（可选）：是否观察受监视元素的属性值变更，默认
false。若指定了attributeOldValue或attributeFilter，会隐含为true。 characterData（可选）：是否监视目标节点或子树中字符数据的变化，默认
false。若指定了characterDataOldValue，会隐含为true。attributeFilter（可选）：要监视的特定属性名称数组。未包含此属性时，所有属性更改都会触发通知。
- attributeOldValue（可选）：为
true时，属性变动记录里会带上改动前的值。 - characterDataOldValue（可选）：为
true时，文本变动记录里会带上改动前的文本。 - subtree（可选）：是否把监视范围扩到目标节点整棵子树，默认
false。其他选项也会作用于子树中的节点，而不仅是目标节点自身。
- childList（可选）：是否监视目标节点（若
以下任一情况都会抛出异常：
- 配置选项使得实际上不会监视任何内容，即 childList、attributes、characterData 三个属性都为 false。
- attributes 为 false，但是 attributeOldValue 为 true 或者 attributeFilter 配置存在。
- characterData 为 false，但是 characterDataOldValue 为 true。
注意： 对一个节点多次添加同一个观察器是无效的，回调函数依然只会触发一次。但是，如果指定不同的 options 对象，就会被当作两个不同的观察器。
takeRecords()
返回已检测到但尚未由观察者的回调函数处理的所有匹配 DOM 更改的列表，使变更队列保持为空。
此方法最常见的使用场景是在断开观察者之前，立即获取所有未处理的更改记录，以便在停止观察者时可以处理任何未处理的更改。
注意： 调用 takeRecords() 后，已发生但未传递给回调的变更队列将保留为空。
disconnect()
告诉观察者停止观察变动。 可以通过再次调用 observe() 方法来重启观察者。
注意： 所有已经检测到但是尚未向观察者报告的变动都会被丢弃。
注意： 如果被观察的元素被从 DOM 中移除，然后被浏览器的垃圾回收机制释放，此 MutationObserver 将同样被删除。