MutationObserver的使用详解

MutationObserver 是一个用于监听 DOM 变化的 JavaScript 对象，可以检测到 DOM 树中的添加、移除、属性变化或文本内容变化。它提供了一种更高效和灵活的方式来观察 DOM 变化，而不需要反复轮询 DOM 节点的状态。

MutationObserver 的基本使用步骤

1、创建一个 MutationObserver 实例：
通过实例化 MutationObserver 对象，并传入一个回调函数，当 DOM 发生变化时，该回调函数会被调用。如下：

  observer = new MutationObserver((mutationsList, observer) => {
    box.scrollTop = box.scrollHeight
  })

2、定义观察选项：
使用一个包含配置选项的对象，来指定希望监听哪些类型的 DOM 变化。

  // 观察器的配置（需要观察什么变动）
  const config = { attributes: false, childList: true, subtree: true }

• config 是一个对象，用于指定 MutationObserver 需要观察的变动类型。
• attributes: false：不观察属性变化。
• childList: true：观察直接子节点的添加或删除。
• subtree: true：观察整个子树（包括所有子节点和后代节点）的变动。

3、开始观察：
调用 observe 方法，并传入要观察的目标节点和观察选项。

  observer.observe(box, config)

4、停止观察：
调用 disconnect 方法，停止观察 DOM 变化。

  observer?.disconnect()

5、处理变动记录：
通过回调函数获取变动记录，并对其进行处理。