从名字也能看出，这玩意儿也是一个观察器，从上面的交叉观察器我们也能明白观察器是用来干嘛的，所谓的观察器，就和事件监听非常类似，我们可以认为是对事件的一种补充，例如交叉观察器，我们可以认为是对交叉事件的监听，而 MutationObserver 是观察 DOM 文档变化的观察器，也就是用于监听 DOM 文档的变化。

我们可以通过 MutationObserver 类创建一个观察器

const mub = new MutationObserver((mutations) =>{//当事件触发，会调用这个回调函数

});

接下来调用观察器的 observe 方法进行监听，该方法有两个参数，第一个参数为需要观察的 DOM 元素，第二个参数为配置对象，具体配置如下：

• attributes: true, 布尔类型 - 观察目标属性的改变
• characterData: true, // Boolean - 观察目标数据的改变 (改变前的数据/值)，也就是文本节点，使用该属性需要配置 subtree
• childList: true, // Boolean - 观察目标子节点的变化，比如添加或者删除目标子节点，不包括修改子节点以及子节点后代的变化
• subtree: true, // Boolean - 目标以及目标的后代改变都会观察
• attributeOldValue: true, // Boolean - 表示需要记录改变前的目标属性值
• characterDataOldValue: true, // Boolean - 设置了 characterDataOldValue 可以省略 characterData 设置
• attributeFilter: ['src', 'class'] // Array - 观察指定属性

当发生变化的时候，回调函数内会给我们传入一个数组，保存了本次变化的所有信息，我们就可以通过这些信息干一些事情。