开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第22天，点击查看活动详情
MutationObserver 是现代浏览器提供的一个 Web API，用于检测 DOM 中的变化。使用此 API 可以监听新添加或删除的节点、属性更改或文本节点内容的更改。
为什么需要这么做呢？
在很多情况下，MutationObserver API 可以派上用场。例如：
- 您想通知用户，他们当前所在的页面发生了一些变化。
- 您正在开发一个新的花哨的 JavaScript 框架，该框架会根据 DOM 的变化动态加载 JavaScript 模块。
- 您可能正在使用 WYSIWYG 编辑器，尝试实现撤消功能。通过利用 MutationObserver API，您可以随时了解所做的更改，因此您可以轻松撤消它们。
这些只是 MutationObserver 如何提供帮助的几个例子。
如何使用 MutationObserver
在你的应用中实现MutationObserver非常简单。您只需要给构造函数传递一个函数参数，即可创建一个 MutationObserver 实例，该函数在每次 DOM 发生改变时都会被调用。该函数的第一个参数是单个批次中发生的所有改变的集合。每个改变都提供有关其类型和已发生变化的信息。
var mutationObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});
创建的实例有三个方法：
observe— 开始监听变化。接受两个参数——你想观察的 DOM 节点和一个设置对象disconnect— 停止监听变化takeRecords— 返回触发回调之前的最后一批更改。
以下代码段显示了如何开始观察：
// 开始监听该页面根节点的 DOM 变化
mutationObserver.observe(document.documentElement, {
attributes: true,
characterData: true,
childList: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
});
现在，假设 DOM 中有一些很简单的div：
<div id="sample-div" class="test"> Simple div </div>
使用 jQuery，您可以从该 div 中删除 class 属性：
$("#sample-div").removeAttr("class");
我们前面已经开始观察了，因此调用mutationObserver.observe(...)后，我们将在相应MutationRecord 的控制台中看到一个日志：
这是移除class属性引起的改变。
最后，要停止观察 DOM，您可以执行以下操作：
mutationObserver.disconnect();
现在，得到了MutationObserver广泛的支持：