简介
listen.min.js 是一个轻量级的 JavaScript 库，用于监听 DOM 元素的变化。它的优点是使用方便、文档详细、代码精简，适用于前端开发中的多种场景。在本文中，我们将介绍如何使用 listen.min.js 实现实时监听 DOM 元素的变化。
用法说明
安装
我们可以通过 NPM 进行安装：
npm install listen.min.js
或者通过 CDN 进行引入：
<script src="https://cdn.jsdelivr.net/npm/listen.min.js/dist/listen.min.js"></script>
监听元素的变化
listen.min.js 提供了一个 listen() 方法用于监听 DOM 元素的变化。该方法接收三个参数，分别是目标元素、回调函数和配置项。其中，目标元素必填，回调函数可以为空，配置项也可以为空。
示例代码：
<div id="test"></div>
<script>
const test = document.querySelector('#test')
listen(test, function() {
console.log('test element has been changed!')
})
</script>上面的代码中，我们创建了一个空的 div 元素，并给它设置了 id 属性为 test。然后我们使用 document.querySelector() 方法获取该元素，并将其作为 listen() 方法的第一个参数进行监听。在元素发生变化时，控制台输出 test element has been changed!。这是因为我们在回调函数中写入了一条语句，用于输出信息。
配置项
listen.min.js 支持以下配置项：
attributes：是否监听元素的属性变化，默认为false。childList：是否监听元素的子元素变化，默认为false。subtree：是否监听子孙元素的变化，默认为false。
示例代码：
-- -------------------- ---- -------
---- ----------------
--------
----- ---- - -------------------------------
-------
-----
---------- -
----------------- ------- --- ---- ----------
--
-
----------- -----
---------- -----
-------- ----
-
-
--------------------- -
------------------------- -----------
-- -----
--------------------- -
-------------- - ----------------
-- -----
---------在上面的示例代码中，我们开始时定义了一个空的 div 元素，并通过 listen() 方法添加了监听器。在配置项中，我们将 attributes、childList 和 subtree 都设置为了 true，即表示监听元素的属性变化、子元素变化和子孙元素的变化。然后我们通过 test.setAttribute() 和 test.innerHTML 方法分别改变了元素的属性和内容，来触发元素的变化。在控制台中可以看到输出了两次变化信息。
总结
本文介绍了使用 listen.min.js 监听 DOM 元素的变化的方法。我们讲解了如何安装 listen.min.js，并使用 listen() 方法来监听元素的变化。另外，我们还讲解了三个可选的配置项，分别是 attributes、childList 和 subtree。通过本文的学习，相信读者已经掌握了使用 listen.min.js 的方法，在实际开发中可以更加方便地监听 DOM 元素的变化，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bce967216659e244d0a