在前端开发中，随着用户交互越来越复杂，DOM 的变化也越来越频繁。因此，如何快速、准确地检测和监视 DOM 变化成为了一个重要的问题。
本文将介绍最有效的检测/监视 DOM 变化的方法，并提供详细的学习和指导意义。我们还将通过示例代码展示这些方法的具体用法。
MutationObserver
MutationObserver 是一种非常强大的 API，可以实时监视 DOM 树结构中的变化并进行相应处理。
使用 MutationObserver 需要创建一个新的实例，并向其传递一个回调函数。当监视到 DOM 树中的节点被添加、删除或修改时，MutationObserver 就会调用该回调函数。通过在回调函数中执行适当的操作，您可以及时响应 DOM 变化。
以下是一个简单的示例代码：
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
console.log(mutation.type);
});
});
observer.observe(document.body, { childList: true, subtree: true });在上面的示例中，我们创建了一个 MutationObserver 实例，并将其附加到了 document.body 节点上。我们还配置了选项对象以监听子节点列表和子树中节点的变化。每次 DOM 树发生变化时，MutationObserver 都会调用我们的回调函数，并输出变化的类型。
IntersectionObserver
IntersectionObserver 是另一种非常有用的 API，可以检测指定元素与视口之间的交集情况。它能够实时监控元素的可见性，并在元素进入或离开视口时触发回调函数。
以下是一个示例代码：
-- -------------------- ---- -------
----- ------- - -
----- -----
----------- ------
---------- ---
--
----- -------- - --- ------------------------------ -- -
----------------------- -- -
----------------------------------
---
-- ---------
----------------------------------------------------在上面的示例中，我们创建了一个 IntersectionObserver 实例，并将其附加到了具有 .target 类名的节点上。我们还配置了选项对象，以便在目标元素完全可见时触发回调函数。每次目标元素的可见性发生变化时，IntersectionObserver 都会调用我们的回调函数，并输出元素是否可见。
requestAnimationFrame
requestAnimationFrame 是另一种用于检测 DOM 变化的方法。它可以根据浏览器的刷新率，在下一次重绘之前执行回调函数。
使用 requestAnimationFrame 的好处是它可以避免过多的计算和导致性能问题的回流。但是，由于它只在下一次重绘之前执行回调函数，因此可能无法及时响应某些 DOM 变化。
以下是一个示例代码：
-- -------------------- ---- -------
-------- ---------- -
---------------- --- -----------
-
-------- ------------ -
--- ------- - -----------------------------------
-------------- -- -
----- ---------- - -----------------------------------
-- ----------- --- -------- -
------- - -----------
--------------------------------
-
-- ------
-
-------------在上面的示例中，我们定义了一个名为 observeDOM 的函数，该函数将定期检查当前 DOM 是否与上一次检查时的 DOM 不同。如果 DOM 发生变化，它会通过 requestAnimationFrame 触发回调函数。
结论
以上是最有效的检测/监视 DOM 变化的方法。无论您使用哪种方法，都需要确保及时检测和响应 DOM 变化，并避免可能导致性能问题的回流。
希望本文可以帮助您更
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24701