乐趣区

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

jiezi
点击在线浏览，体验更好 链接
古代 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
退出移动版