在前端开发中，经常需要动态地修改页面上的DOM元素。当DOM元素变化时，我们有时需要实时地获取到这些变化并进行相应的处理。jQuery提供了一种方便的方法来监听DOM元素的变化。
使用 MutationObserver 监听 DOM 变化
MutationObserver 是浏览器原生 API，用于监听DOM树中的变化。它可以监听DOM节点的添加、删除、属性变化等操作，然后触发回调函数执行相应的操作。
下面是一个简单的示例代码：
-- -------------------- ---- -------
-- --------------
--- ---------- - ----------------------------------
-- -----------
--- -------- - --- ------------------------- ----------- -
-------------------------- ---------- -
---------------------------
---
---
-- ------
--- ------ - - ----------- ----- ---------- ----- -------- ---- --
-- -----------
---------------------------- --------在上面的代码中，首先选择需要监听的DOM节点（#target），然后创建一个新的观察者对象 observer。接着，配置观察选项 config，使其能够监听子节点的变化、属性变化以及整个DOM树的变化。最后，将目标节点和观察选项传入 observer.observe() 方法中，开始监听DOM变化。
当目标节点或其子节点发生变化时，会触发回调函数中的 MutationRecord 对象。通过检查 type 属性，可以知道具体变化类型是什么。
使用 jQuery 插件监听 DOM 变化
除了使用 MutationObserver 外，我们还可以使用 jQuery 插件来监听DOM变化。其中最常用的插件是 jQuery Watch。
下面是一个简单的示例代码：
-- -------------------- ---- -------
-- --------------
--- ---------- - -------------
-- -------
------------------
----------- ------
--------- -------- ------ -- -
------------------
-
---在上面的代码中，首先选择需要监听的DOM节点（#target），然后调用 watch() 方法，开始监听DOM变化。可以通过传递选项配置监听属性。当目标节点或其子节点发生变化时，会触发回调函数，并返回变化数据。
总结
通过上述两种方法，我们可以方便地监听DOM元素的变化，并及时响应变化。在实际开发中，可以根据自己的需求选择合适的方法进行使用。
值得注意的是，MutationObserver 是浏览器原生 API，支持性较好。而 jQuery 插件则需要额外引入库文件，可能存在兼容性问题。因此，在选择方法时要考虑到浏览器兼容性及自身的项目需求。
希望本文可以对大家有所帮助，也欢迎大家留言交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30133