JS div 检测变化 - Javascript

在前端开发中，经常需要检测 div 中内容的变化。本文将介绍如何使用 Javascript 来实现 div 内容的变化检测。

方法一: MutationObserver

MutationObserver 是一个 Javascript 原生 API，用于监听 DOM 节点树的变化。可以使用该 API 来监听 div 内容的变化。

使用方法如下:

// 获取需要监听变化的 div 元素
const target = document.querySelector('#target-div');

// 创建一个 MutationObserver 实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(`变化类型: ${mutation.type}`);
    console.log(`变化前内容: ${mutation.oldValue}`);
    console.log(`变化后内容: ${mutation.target.innerHTML}`);
  });
});

// 配置 MutationObserver 实例
const config = { attributes: true, childList: true, characterData: true, attributeOldValue: true, characterDataOldValue: true, subtree: true };

// 用 MutationObserver 实例监听变化
observer.observe(target, config);

代码说明:

• 上述代码中我们使用 document.querySelector 方法来获取需要监听变化的 div 元素。
• 然后，我们创建一个 MutationObserver 实例，并传入一个回调函数作为参数。
• 回调函数中使用了 mutations.forEach 方法来遍历变化过的所有节点及其属性，输出了变化类型、变化前后内容。
• 最后，我们使用 observer.observe 方法来监听变化，并传入 target 及 config 作为参数进行配置。

方法二: setInterval

除了使用 MutationObserver 进行监听外，我们还可以使用 setInterval 来轮询 div 内容是否发生变化。

使用方法如下:

// 获取需要监听变化的 div 元素
const target = document.querySelector('#target-div');

// 获取初始内容
let content = target.innerHTML;

// 使用 setInterval 函数进行轮询
setInterval(function() {
  // 如果目标 div 内容发生变化则进行逻辑处理
  if (content !== target.innerHTML) {
    console.log(`内容变化前: ${content}`);
    console.log(`内容变化后: ${target.innerHTML}`);

    // 执行其他逻辑
    // ...

    // 更新变化前内容
    content = target.innerHTML;
  }
}, 1000); // 每隔 1 秒进行一次轮询

代码说明:

• 上述代码中我们使用 document.querySelector 方法来获取需要监听变化的 div 元素。
• 其次，我们使用 setInterval 函数设置轮询定时器，每隔一段时间便进行一次轮询。
• 在轮询过程中，我们使用 if 判断语句，比较目标 div 的内容是否发生变化，如果发生变化则进行逻辑处理。
• 最后，我们更新了变化前内容。

两种方法的比较

MutationObserver 和 setInterval 都可以用于监听 div 内容的变化。但它们各有优缺点。

MutationObserver 的优点:

• 相对于 setInterval 更高效，它是一个事件驱动的API，可以实时监听到变化。
• 功能更加全面，可以监听 DOM 树的多方面变化。

MutationObserver 的缺点:

• 在一些旧版本的浏览器中不支持。
• 对于大量变化的情况，如改变一个 Node 的父元素，可能导致大量的回调函数被执行，造成性能损失。

setInterval 的优点:

• 对于变化频率不高的小规模场景，使用 setInterval 会更加方便。

setInterval 的缺点:

• 不够高效，不能实时监听到变化。
• 当内容变化比较多的时候，会消耗过多的性能资源。

根据实际场景的不同，我们可以选择合适的方法来监听 div 内容的变化。

结论

本文介绍了 Javascript 中如何使用 MutationObserver 和 setInterval 两种方法来监听 div 内容的变化，并比较了它们的优缺点。希望本文能够帮助到你在前端开发中解决相关问题。