MutationObserver

5,438 阅读3分钟

前端使用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数组,包含了所有变化记录的信息。

监听类型

MutationObserverconfig参数可以用来指定监听的类型,它有以下几个属性:

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

我们可以将多个类型组合起来,例如:

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

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

断开监听

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

observer.disconnect();

应用场景

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

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

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

注意事项

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