MutationObserver API
1、概述
MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。
但是，它与Mutation Events事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。
Mutation Observer 有以下特点：
异步触发方式
它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。
它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。
2、MutationObserver()构造函数
使用时，会使用MutationObserver构造函数创建并返回一个新的 MutationObserver实例， 它会在指定的DOM发生变化时被调用。
const observer = new MutationObserver(callback);
上面代码中的callback函数，会在每次 DOM 变动后调用。该回调函数接受两个参数，第一个是变动数组，第二个是观察器实例，下面是一个例子。
function callback(mutationList, observer) {
mutationList.forEach((mutation) => {
switch(mutation.type) {
case 'childList':
/* 从树上添加或移除一个或更多的子节点；参见 mutation.addedNodes 与
mutation.removedNodes */
break;
case 'attributes':
/* mutation.target 中某节点的一个属性值被更改；该属性名称在 mutation.attributeName 中，
该属性之前的值为 mutation.oldValue */
break;
}
});
}
const observer = new MutationObserver(callback);
3、MutationObserver实例的方法
3.1、 observe()
observe方法用来启动监听，它接受两个参数：
- 第一个参数：所要观察的 DOM 节点
- 第二个参数：一个配置对象，指定所要观察的特定变动
// 得到要观察的元素
const elementToObserve = document.querySelector("#targetElementId");
// 创建一个叫 `observer` 的新 `MutationObserver` 实例，
// 并将回调函数传给它
const observer = new MutationObserver(function() {
console.log('callback that runs when observer is triggered');
});
// 在 MutationObserver 实例上调用 `observe` 方法，
// 并将要观察的元素与选项传给此方法
const conf = {
subtree: true,
childList: true
}
observer.observe(elementToObserve, conf);
上面代码中，observe方法接受两个参数，第一个是所要观察的DOM元素是elementToObserve，第二个是所要观察的变动类型（一个可选的MutationObserverInit 对象）。
观察器所能观察的 DOM 变动类型（即上面代码的conf对象），有以下几种。
- childList：子节点的变动（指新增，删除或者更改）。
- attributes：属性的变动。
- characterData：节点内容或节点文本的变动。
想要观察哪一种变动类型，就在conf对象中指定它的值为true。 提醒：三种类型必须有一个为true，否则会抛出 TypeError 异常
下面时所有的conf配置项：
-
attributeFilter可选：要监视的特定属性名称的数组。如果未包含此属性，则对所有属性的更改都会触发变动通知。无默认值。 -
attributeOldValue可选：当监视节点的属性改动时，将此属性设为true将记录任何有改动的属性的上一个值。有关观察属性更改和值记录的详细信息。无默认值。 -
attributes可选：设为true以观察受监视元素的属性值变更。默认值为false。 -
characterData可选：设为true以监视指定目标节点或子节点树中节点所包含的字符数据的变化。无默认值。 -
characterDataOldValue可选：设为true以在文本在受监视节点上发生更改时记录节点文本的先前值。无默认值。 -
childList可选：设为true以监视目标节点（如果subtree为true，则包含子孙节点）添加或删除新的子节点。默认值为false。 -
subtree可选：设为true以将监视范围扩展至目标节点整个节点树中的所有节点。MutationObserverInit的其他值也会作用于此子树下的所有节点，而不仅仅只作用于目标节点。默认值为false。
3.2、 disconnect()
disconnect方法用来停止观察。调用该方法后，DOM 再发生变动，也不会触发观察器。
observer.disconnect();
3.3、 takeRecords()
从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到[MutationRecord]
observer.takeRecords();
4、MutationRecord 对象
DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。
MutationRecord对象包含了DOM的相关信息，有如下属性：
-
type：观察的变动类型（attribute、characterData或者childList）。 -
target：发生变动的 DOM 节点。 -
addedNodes：新增的 DOM 节点。 -
removedNodes：删除的 DOM 节点。 -
previousSibling：前一个同级节点，如果没有则返回null。 -
nextSibling：下一个同级节点，如果没有则返回null。 -
attributeName：发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。 -
oldValue：变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。
5、示例
监听文字变动