前端使用mutationObserver

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

基本用法

// 创建一个 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：监听目标节点的所有后代节点的变化。

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

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

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

断开监听

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

observer.disconnect();

应用场景

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

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

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

注意事项

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