乐趣区

关于前端:现代JavaScript高级教程MutationObserver监测DOM变化的强大工具

点击在线浏览,体验更好 链接
古代 JavaScript 高级小册 链接
深入浅出 Dart 链接
古代 TypeScript 高级小册 链接

MutationObserver:监测 DOM 变动的弱小工具

引言

在 Web 开发中,操作和监测 DOM 元素的变动是一项常见的工作。MutationObserver 是 JavaScript 提供的一个弱小的 API,用于异步监测 DOM 树的变动,并在发生变化时执行相应的操作。本文将具体介绍 MutationObserver 的属性、利用场景以及应用示例,帮忙读者充沛了解和利用这一弱小的工具。

1. MutationObserver 简介

MutationObserver 是一个 JavaScript 的 API,用于监测 DOM 树的变动。它提供了一种异步的形式来监听 DOM 元素的减少、删除、属性变动等操作,以及文本节点的批改。通过 MutationObserver,开发者能够实时地捕捉到 DOM 的变动,并做出相应的响应。

MutationObserver 是在 2012 年引入的,目前被广泛支持的浏览器(包含 Chrome、Firefox、Safari、Edge 等)都提供了对 MutationObserver 的反对。

2. MutationObserver 的属性

MutationObserver 提供了一些属性,用于配置和管制观察器的行为。上面是一些罕用的属性:

  • attributes:是否监测元素的属性变动。
  • attributeOldValue:是否在属性变动时记录旧值。
  • attributeFilter:指定要监测的属性列表。
  • childList:是否监测子元素的增加或移除。
  • subtree:是否监测后辈元素的变动。
  • characterData:是否监测文本节点的内容变动。
  • characterDataOldValue:是否在文本节点内容变动时记录旧值。

通过这些属性,能够灵便地配置 MutationObserver 的察看行为,以满足不同的需要。

3. MutationObserver 的利用场景

MutationObserver 在许多场景下都能施展重要作用。上面是一些常见的利用场景:

3.1 动静内容加载

当页面中的内容是通过异步加载或动静生成时,能够应用 MutationObserver 来监测内容的变动,并在变动产生后进行相应的解决,如更新页面布局、增加事件监听器等。例如,在有限滚动加载的场景中,当新的内容被加载到页面时,能够应用 MutationObserver 来主动监听内容的变动,并在变动产生后动静增加相应的元素或事件。

3.2 表单验证

当须要实时验证用户输出时,能够应用 MutationObserver 来监测表单元素的变动,以及对应的属性变动,如值的变动、禁用状态的变动等。这样能够及时地对用户的输出进行验证和反馈。例如,在一个表单中,当用户输出时,能够应用 MutationObserver 来监测输入框的值变动,并在值变动后进行实时的表单验证。

3. 响应式布局

当页面布局须要依据 DOM 变动自适应调整时,能够应用 MutationObserver 来监测相干元素的变动,并依据变动动静地调整页面布局。例如,在响应式网页设计中,当窗口大小发生变化或元素被增加或移除时,能够应用 MutationObserver 来监听相干元素的变动,并依据变动从新计算和调整页面布局,以适应不同的设施和屏幕尺寸。

3.4 自定义组件开发

在自定义组件的开发中,MutationObserver 能够用于监听组件外部的 DOM 变动,以及对应的属性变动。这样能够在组件外部做出相应的解决,如更新组件的状态、从新渲染组件等。例如,当一个自定义组件中的某个子元素被增加或移除时,能够应用 MutationObserver 来监听这些变动,并在变动产生后更新组件的状态或从新渲染组件。

4. 应用 MutationObserver 的示例

上面通过几个示例来演示如何应用 MutationObserver 进行 DOM 变动的监测。

4.1 监测元素属性变动

上面的示例代码演示了如何应用 MutationObserver 监测元素的属性变动,并在变动产生后进行相应的解决:

// 指标元素
const targetElement = document.querySelector('#target');

// 创立一个 MutationObserver 实例
const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.type === 'attributes') {console.log(` 属性 ${mutation.attributeName} 发生变化 `);
      // 执行相应的解决逻辑
    }
  });
});

// 配置观察器
const config = {attributes: true,};

// 启动观察器
observer.observe(targetElement, config);

在上述代码中,咱们首先抉择了一个指标元素,而后创立了一个 MutationObserver 实例。接下来,咱们配置了观察器,指定咱们要监测的变动类型为属性变动。最初,咱们通过调用 observe 办法,将观察器绑定到指标元素上。

当指标元素的属性发生变化时,MutationObserver 的回调函数将被调用,并传递一个 mutations 参数,该参数蕴含了所有产生的变动。在回调函数中,咱们能够依据变动的类型(mutation.type)来判断具体的变动类型,并执行相应的解决逻辑。

4.2 监测子元素的增加或移除

上面的示例代码演示了如何应用 MutationObserver 监测子元素的增加或移除,并在变动产生后进行相应的解决:

// 指标元素
const targetElement = document.querySelector('#target');

// 创立一个 MutationObserver 实例
const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.type === 'childList') {mutation.addedNodes.forEach((addedNode) => {console.log(` 增加了子元素:${addedNode.nodeName}`);
        // 执行相应的解决逻辑
      });

      mutation.removedNodes.forEach((removedNode) => {console.log(` 移除了子元素:${removedNode.nodeName}`);
        // 执行相应的解决逻辑
      });
    }
  });
});

// 配置观察器
const config = {childList: true,};

// 启动观察器
observer.observe(targetElement, config);

在上述代码中,咱们创立了一个 MutationObserver 实例,并将观察器配置为监测子元素的增加或移除。当指标元素的子元素产生增加或移除操作时,MutationObserver 的回调函数将被调用,并传递一个 mutations 参数,该参数蕴含了所有产生的变动。在回调函数中,咱们能够依据变动的类型(mutation.type)为 childList 来判断子元素的增加或移除操作,并执行相应的解决逻辑。

4.3 监测文本节点的内容变动

上面的示例代码演示了如何应用 MutationObserver 监测文本节点的内容变动,并在变动产生后进行相应的解决:

// 指标元素
const targetElement = document.querySelector('#target');

// 创立一个 MutationObserver 实例
const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.type === 'characterData') {console.log(` 文本节点内容发生变化:${mutation.target.nodeValue}`);
      // 执行相应的解决逻辑
    }
  });
});

// 配置观察器
const config = {characterData: true,};

// 启动观察器
observer.observe(targetElement, config);

在上述代码中,咱们创立了一个 MutationObserver 实例,并将观察器配置为监测文本节点的内容变动。当指标元素的文本节点的内容发生变化时,MutationObserver 的回调函数将被调用,并传递一个 mutations 参数,该参数蕴含了所有产生的变动。在回调函数中,咱们能够依据变动的类型(mutation.type)为 characterData 来判断文本节点的内容变动,并执行相应的解决逻辑。

5. MutationObserver 的浏览器兼容性

MutationObserver 曾经在大多数古代浏览器中失去反对,包含 Chrome、Firefox、Safari、Edge 等。然而,思考到一些老旧的浏览器版本,倡议在应用 MutationObserver 之前,查看浏览器的兼容性。

能够通过以下链接查看 MutationObserver 的浏览器兼容性信息:

  • Can I use MutationObserver?

6. 总结

MutationObserver 是一个弱小的工具,用于监测 DOM 树的变动。通过 MutationObserver,咱们能够异步地监听 DOM 元素的减少、删除、属性变动等操作,并在发生变化时执行相应的操作。它在动静内容加载、表单验证、响应式布局、自定义组件开发等场景下施展重要作用。本文介绍了 MutationObserver 的属性、利用场景以及应用示例,

7. 参考资料

  • MDN Web Docs – MutationObserver
  • DOM Living Standard – MutationObserver
  • Using Mutation Observers
  • DOM Mutation Observers
退出移动版