在前端开发中，我们经常需要根据用户的交互或者其它条件动态地创建、移除或修改页面上的元素。Mutation Observer 是一个强大的 JavaScript API，可以帮助我们监测 DOM 树的变化，并作出相应的响应。
如何使用 Mutation Observer
Mutation Observer 的基本使用方法如下：
----- -------- - --- ---------------------------- -- -
---------------------------- -- -
-- -- --- --
---
---
---------------------------- ---------其中，targetNode 是被观察的节点，options 是一个对象，用于指定需要监测的变化类型。当 targetNode 或者它的子孙节点发生变化时，就会触发回调函数中的逻辑。
创建新元素
我们可以利用 Mutation Observer 来监测新元素的创建，并在它们被添加到 DOM 中时进行一些操作。以下是一个示例代码，演示了如何在每次创建新的 <li> 元素时，自动将其添加到 <ul> 元素中：
--- ---------------
------- ------------ -------------
--------
----- ---- - --------------------------------
----- --------- - -------------------------------
-------- --------- -
----- ---- - -----------------------------
---------------- - ---- ------
----------------------- -- ----
---------------- ---- ----- -- --- --------
-
----- -------- - --- ---------------------------- -- -
---------------------------- -- -
---------------------------------- -- -
-- -------------- --- ----- - -- --------- ----
---------------- ---- ------- -----------
-
---
---
---
---------------------- - ---------- ---- --- -- -------
----------------------------------- ---------
---------当用户点击 "Add Item" 按钮时，将创建一个新的 <li> 元素，并添加到 <ul> 元素中。同时，Mutation Observer 会监测到新的 <li> 元素的创建，并在控制台输出相关信息。
总结
Mutation Observer 提供了一种方便而强大地监测 DOM 变化的方法。我们可以利用它来实现各种有趣的功能，比如自动加载更多内容、响应用户的输入等等。不过需要注意的是，由于 Mutation Observer 的使用可能会对性能造成影响，请谨慎使用，并尽可能地优化代码逻辑。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31353