前端开发中，我们经常需要监听 DOM 变化，以便在需要时做出相应的处理。而 Custom Elements 和 Mutation Observer 是两个非常有用的 API，它们可以帮助我们更方便地监听 DOM 变化。
Custom Elements
Custom Elements 是一个用于创建自定义 HTML 元素的 API。通过它，我们可以创建一个全新的 HTML 元素，并且可以使用 JavaScript 来控制它。
要创建一个 Custom Element，我们需要使用 window.customElements.define 方法，如下所示：
class MyElement extends HTMLElement {
constructor() {
super();
// 在构造函数中添加元素的样式和事件监听器
}
}
window.customElements.define('my-element', MyElement);在上面的代码中，我们先定义了一个 MyElement 类，它继承自 HTMLElement。然后我们使用 window.customElements.define 方法来将 MyElement 类注册为一个自定义元素，其名称为 my-element。
一旦我们定义了一个 Custom Element，我们就可以在 HTML 中使用它了：
<my-element></my-element>
Mutation Observer
Mutation Observer 是一个用于监听 DOM 变化的 API。它可以帮助我们监视 DOM 树的变化，并在需要时做出相应的处理。
要使用 Mutation Observer，我们需要先创建一个 MutationObserver 对象，然后使用 observe 方法来开始监听 DOM 变化，如下所示：
-- -------------------- ---- ------- ----- -------- - --- ---------------------------- -- - -- ------------- --- ------------------------------- - ---------- ----- -------- ----- ----------- ----- -------------- ----- ---
在上面的代码中，我们首先创建了一个 MutationObserver 对象。然后我们使用 observe 方法来开始监听 DOM 变化。在这里，我们将 DOM 树的整个文档作为观察目标，同时监听子节点的添加和删除、属性的变化以及文本节点的变化。
如何结合使用 Custom Elements 和 Mutation Observer？
现在我们已经了解了 Custom Elements 和 Mutation Observer 的基本用法，那么如何将它们结合起来使用呢？
在实际应用中，我们可以在 Custom Element 的构造函数中创建一个 Mutation Observer，然后在回调函数中做出相应的处理。例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -- -------- --------
----- -------- - --- ---------------------------- -- -
-- -------------
---
-- ---- --- --
---------------------- -
---------- -----
-------- -----
----------- -----
-------------- -----
---
-
-
------------------------------------------ -----------在上面的代码中，我们在 MyElement 的构造函数中创建了一个 Mutation Observer，并开始监听 DOM 变化。在回调函数中，我们可以做出相应的处理，例如重新渲染 Custom Element 或更新 Custom Element 的属性等。
总结
本文介绍了如何使用 Custom Elements 和 Mutation Observer 监听 DOM 变化。Custom Elements 可以帮助我们创建自定义 HTML 元素，而 Mutation Observer 可以帮助我们监听 DOM 树的变化。通过将它们结合起来使用，我们可以更方便地监听 DOM 变化，并在需要时做出相应的处理。
示例代码：https://codepen.io/pen/?template=JjJdGwq
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659fa969add4f0e0ff832cf0