监听 HTML 中 div 子级的变化 - JavaScript

在 Web 开发中，我们常常需要在一个页面中动态地更新元素或者执行某些操作。当 HTML 中的 div 元素或其子级元素发生变化时，如何实时捕获这些变化呢？

以下是基于 JavaScript 实现的方法。

原生实现

原生 JavaScript 中提供了一种 MutationObserver 接口，可以用于观察当 DOM 被修改时所发生的变化，并指定对这些变化做出反应的函数。

// 获取要观察的 div 元素
const targetNode = document.querySelector('div');

// 创建一个观察器实例
const observer = new MutationObserver((mutationsList, observer) => {
  // 对观察到的变化做出反应
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('子节点已被修改');
    }
  }
});

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

// 使观察器开始观察目标节点及其子节点
observer.observe(targetNode, config);

这段代码将会捕获目标 div 元素及其所有子节点的变化，并在控制台上输出“子节点已被修改”。

使用第三方库

当我们需要在多个节点上监听变化时，原生实现会显得比较麻烦。此时我们可以使用像 MutationObserver 这样的第三方库来简化操作。

// 引入 mutationobserver 库
import MutationObserver from 'mutationobserver';

// 获取要观察的 div 元素
const targetNode = document.querySelector('div');

// 创建一个观察器实例
const observer = new MutationObserver((mutationsList, observer) => {
  // 对观察到的变化做出反应
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('子节点已被修改');
    }
  }
});

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

// 使观察器开始观察目标节点及其子节点
observer.observe(targetNode, config);

以上代码使用了 import 语句来导入第三方库 mutationobserver，并在观察器配置中添加了 subtree: true 参数以监听所有子节点的变化。

总的来说，我们可以通过原生实现或第三方库来捕获 HTML 中 div 子级的变化。无论使用哪种方法，我们都可以编写灵活的监听器，并在必要时执行相应的功能。