 # 前端使用mutationObserver

`mutationObserver`是一个在浏览器环境中一种用于监听DOM变化的JavaScript API，它可以用于监听 DOM 树中指定节点及其子节点的变化，当节点内容、属性、子节点结构等发生改变时，它可以及时检测到并触发回调函数。这对于前端开发来说非常有用，可以被用来监控 DOM 变化、异步数据加载和自定义组件等场景。

## 基本用法

```js
// 创建一个 MutationObserver 实例，监听目标节点的变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation.type); // 打印出变化类型，例如 childList、attributes 等
  });
});

// 配置 MutationObserver，指定监听的节点和监听类型
const config = {
  attributes: true, // 监听属性变化
  childList: true, // 监听子节点变化
//   characterData: true, // 监听文本内容变化
  subtree: true // 监听后代节点变化
};

// 将 MutationObserver 实例绑定到一个目标节点
const targetNode = document.getElementById("target");


observer.observe(targetNode, config);

```

上面的代码创建了一个`MutationObserver`实例，并将其绑定到一个目标节点上。当目标节点或其子孙节点发生变化时，`MutationObserver`实例会调用传入的回调函数，其中参数`mutations`是一个`MutationRecord`数组，包含了所有变化记录的信息。

## 监听类型

`MutationObserver`的`config`参数可以用来指定监听的类型，它有以下几个属性：

* `attributes`：监听属性变化；
* `childList`：监听子节点的添加、删除；
* `characterData`：监听文本内容的变化；
* `subtree`：监听目标节点的所有后代节点的变化。

我们可以将多个类型组合起来，例如：

```js
const config = {
  attributes: true, // 监听属性变化
  childList: true, // 监听子节点变化
  subtree: true // 监听后代节点变化
};

```

上面的配置表示监听目标节点及其子孙节点的所有变化。

## 断开监听

我们可以通过`disconnect`方法来断开`MutationObserver`实例的监听：

```js
observer.disconnect();

```

## 应用场景

`mutationObserver`的应用场景非常广泛，以下是一些常见的例子：

* 自动保存表单：监听表单内容的变化，自动保存表单内容，避免用户手动点击保存按钮；
* 自动加载数据：监听列表滚动条位置的变化，自动加载更多数据；
* 观察者模式：监听一个对象的变化，当变化发生时触发相应的回调函数。
* 自动获取页面高度：监听页面添加元素成员,自动计算高度（微页面组装元素列表）

总之，`mutationObserver`可以帮助我们在DOM变化时及时更新页面，并提升用户体验。

## 注意事项

* 在监听节点变化时，需要注意避免无限循环，例如在回调函数中修改了被监听的节点，会导致 MutationObserver 不断触发。
* 在监听异步数据加载和自定义组件等场景时，需要注意是否有对应的节点或属性需要监听。
* 在兼容性方面，MutationObserver 在 IE9 及以下版本不支持。