在前端开发中，我们经常需要监听DOM元素的变化，以便及时做出响应。而 npm 包 kd-shim-mutation-summary 就是一个非常优秀的 DOM 监听工具，它能够在浏览器中监控实时 DOM 的变化，并返回相关的信息。接下来，我们将详细介绍如何使用该npm包。
安装和导入
首先，在终端中进入你的项目目录，输入以下代码安装该 npm 包：
npm install kd-shim-mutation-summary
然后，在项目代码中引入该包：
import MutationSummary from 'kd-shim-mutation-summary';
API 介绍
该包提供了以下 API：
new MutationSummary(options, callback)
该 API 可以创建一个 MutationSummary 的实例，options 和 callback 是必须参数。
options
options 参数是一个对象，其中包含以下字段：
container：监听的 DOM 元素
queries：监听的变化类型（可以是属性变化、子元素变化等等）
rootNode：可选参数，用于设置监听的根节点。
oldPreviousSibling：可选参数，用于设置是否返回每个变化前后元素的前一个同级元素。
callback
callback 参数是一个回调函数，用于处理监听到的变化。该函数接收一个数组参数 summaries，数组中的每个元素包含以下字段：
added：添加的节点数组
removed：删除的节点数组
valueChanged：发生了值变化的节点数组
attrChanged：发生了属性变化的节点数组
characterDataChanged：发生了字符数据改变的节点数组
MutationSummary.disconnect()
该 API 用于停止监听。
使用示例
以下示例是在页面中监听元素的属性变化：
<div id="app" class="container" data-text="hello">Hello World!</div>
-- -------------------- ---- -------
------ --------------- ---- ---------------------------
----- --------- - -------------------------------
-- -------
----- ------- - -
- ---------- ------- --
- ---------- ----------- -
--
-- ----
----- -------- - --------- -- -
-----------------------
--
-- -- --------------- --
----- -------- - --- -----------------
----------
-------
-- ----------
-- ----
----------------------总结
通过使用 kd-shim-mutation-summary 这个 npm 包来监控 DOM 上的变化，我们可以很方便地监听实时 DOM 的变化，并及时响应。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efc4c49986ca68d8995