在前端开发中，经常需要监视 DOM 元素的变化。MutationObserver 是用来监听 DOM 变化的 API，但是并非所有浏览器都支持它。这时候就可以使用 npm 包 mutationobserver-shim 来解决兼容性问题。
本文将介绍如何使用 mutationobserver-shim 这个 npm 包，并提供示例代码帮助你快速上手。
安装
要使用 mutationobserver-shim，首先需要在项目目录下执行以下命令安装它：
npm install --save mutationobserver-shim
引入
安装完成后，在需要使用的模块中引入 mutationobserver-shim：
import 'mutationobserver-shim';
使用
创建 MutationObserver 对象
现在，你就可以使用 MutationObserver 对象了：
const observer = new MutationObserver((mutations) => {
// 处理 DOM 变化
});
observer.observe(document.body, {
childList: true,
subtree: true
});这样就创建了一个能够监听 document.body 变化的 MutationObserver 对象。
参数
MutationObserver 构造函数接受一个回调函数和一个选项对象作为参数。回调函数会在 DOM 变化时被调用，传入的参数 mutations 是一个 MutationRecord 数组，包含所有发生变化的节点以及变化类型等信息。
选项对象有以下属性：
- childList：是否监视目标节点的子节点变化，默认为 false。
- attributes：是否监视目标节点属性的变化，默认为 false。
- characterData：是否监视目标节点内容或子节点内容的文本变化，默认为 false。
- subtree：是否监视目标节点以及其后代节点的变化，默认为 false。
示例
下面是一个简单的示例，当一个元素被点击时，它的 class 属性会变化，MutationObserver 就会捕获到这个变化并输出相应的信息：
<div id="myDiv">Hello, world!</div> <button id="myButton">点我</button>
-- -------------------- ---- -------
------ ------------------------
----- --- - ---------------------------------
----- -------- - --- ---------------------------- -- -
---------------------------- -- -
-- -------------- --- ------------ -- ---------------------- --- -------- -
---------------------- ------- ------- -- ---------------------
-
---
---
--------------------- - ----------- ---- ---
------------------------------------------------------------- -- -- -
----------------------------------
---当你运行这段代码并点击按钮时，控制台将输出类似以下的信息：
Attribute 'class' changed to 'highlight'
指导意义
通过本文介绍，你学会了如何使用 mutationobserver-shim 监听 DOM 变化，并且了解了 MutationObserver 构造函数的参数和选项。
在实际开发中，需要监视 DOM 变化的情况很常见，而 mutationobserver-shim 这个 npm 包可以方便地解决不同浏览器的兼容性问题。因此，学会使用 mutationobserver-shim 可以提高你的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44023