前端开发中，经常需要监听 DOM 元素的增删改操作，以便对页面进行动态更新。在这一领域，MutationObserver 是一个非常有用的 API。而 done-mutation-observer 是一款依赖于 MutationObserver 的 npm 包，可以更便捷地完成 DOM 监听操作。
如何安装和引入 done-mutation-observer
使用 npm 安装 done-mutation-observer 如下：
npm install done-mutation-observer --save
安装完成后，在需要使用的项目中引入该模块：
import MutationObserver from 'done-mutation-observer';
使用 done-mutation-observer 进行 DOM 监听
done-mutation-observer 提供了 MutationObserver 的封装，可以更加便捷地监听 DOM 变化。
基本用法如下：
-- -------------------- ---- -------
----- -------- - --- ---------------------------- -- -
---------------------------- -- -
----------------------
---
---
-------------------------- -
---------- -----
-------- -----
----------- -----
-------------- -----
------------------ -----
---------------------- ----
---
在上面的代码中，我们新建了一个 MutationObserver 实例，并指定了回调函数（当 DOM 变化时会触发），通过该实例的 observe 方法，可以监听 DOM 元素的属性、子元素变化等。
observe 方法详解
observe 方法有两个参数：要监听的 DOM 元素对象和配置项。
配置项有以下属性：
- childList：是否监听子元素的变化
- attributes：是否监听元素属性的变化
- characterData：是否监听元素文本的变化
- subtree：是否监听后代元素的变化
- attributeOldValue：是否记录变化前的元素属性值
- characterDataOldValue：是否记录文本变化前的元素文本值
示例代码
使用 done-mutation-observer 监听表格的行列变化：
-- -------------------- ---- -------
------ ---------------- ---- -------------------------
----- ----- - -----------------------------------
----- -------- - --- ---------------------------- -- -
---------------------------- -- -
-- -------------- --- ------------ -
------------------ ------- ----------
-
---
---
----------------------- -
---------- -----
-------- ----
---在上面的代码中，我们通过获取 id 为 'mytable' 的表格元素，新建了一个观察者对象。通过 observer 对象的 observe 方法，监听该表格的子元素变化。如果表格中的行列发生了变化，代码中的 console.log 语句就会执行。
总结
done-mutation-observer 是一款便捷的 DOM 监听库，它封装了 MutationObserver API，可以更加方便地实现 DOM 监听操作。在前端开发中，使用该库可以极大地提高开发效率。当然，还有其他热门的 DOM 操作库，例如 jQuery 和 zenscroll，开发者可以根据实际需求选择使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75757