在前端开发中，我们通常需要监听DOM节点的添加、删除和修改等操作。过去，我们可以使用 DOMNodeInserted 事件来实现这些功能。然而，由于性能问题和浏览器兼容性限制，DOMNodeInserted 事件已经被废弃，并且被移除了。
那么，在不使用 DOMNodeInserted 的情况下，我们如何监听DOM节点的变化呢？本文将探讨一些替代方法，并提供示例代码。
MutationObserver
MutationObserver 是一个新的API，用于监视DOM树中特定节点或子树的更改。通过注册 MutationObserver 回调函数，当所监视的节点或其子节点的属性或子节点发生更改时会调用该回调函数。与 DOMNodeInserted 不同，MutationObserver 具有更好的性能表现，并且不会导致重绘或回流。
以下是一个基本示例：
-- ----------
----- ---------- - ----------------------------------------
-- -----------
----- -------- - --- ------------------------------------ -
------------------------------------ -
---------------------------
---
---
-- -------
----- ------ - - ----------- ----- ---------- ----- -------- ---- --
-- --------
---------------------------- --------以上代码将观察 #some-element 及其子节点的属性和子节点更改。如果目标节点的属性或子节点被更改，将会打印出 attributes 或 childList。
Mutation Events
虽然 DOMNodeInserted 已经被废弃，但是仍然可以使用其他事件来监视DOM树中的更改。例如，可以使用以下事件：
DOMSubtreeModified: 当DOM树的某个子树发生变化时触发。DOMNodeRemoved: 当某个节点从其父节点中被删除时触发。DOMNodeInsertedIntoDocument: 当某个节点被插入到文档中时触发。DOMNodeRemovedFromDocument: 当某个节点从文档中被移除时触发。
以下是一个示例代码：
-------------------------------------------- ----------- - ----------------- ----------- ---
以上代码将监听整个文档中的所有插入事件，并在插入新节点时打印出 Node inserted。
需要注意的是，使用这些事件的性能表现可能比 MutationObserver 差，并且不同浏览器之间的实现也有所不同。因此，建议尽可能使用 MutationObserver。
总结
在本文中，我们介绍了两种替代方法来监听DOM节点的变化：MutationObserver 和 Mutation Events。虽然 Mutation Events 不如 MutationObserver 好用，但是仍然可以用于一些特殊情况。
在实际开发中，应该尽可能使用 MutationObserver 以获得更好的性能和兼容性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31352