程序员必备神器MutationObserver，你还不知道？

2022-11-11 13:19:42

使用 MutationObserver：监控 DOM 变化的秘密武器

MutationObserver

MutationObserver 是一个强大的 JavaScript API，可让你深入了解 DOM 元素的变化。它让你能够监控元素的添加、删除、属性修改、文本内容更改，以及更多。

工作原理

MutationObserver 采用观察者模式。首先，创建一个 MutationObserver 实例，然后将其与一个或多个 DOM 元素关联。当这些元素发生变化时，MutationObserver 会触发一个事件，你可以获取更改的详细数据并进行相应响应。

使用方法

创建 MutationObserver 对象：

const observer = new MutationObserver((mutations, observer) => {
  // 处理更改
});

关联 DOM 元素：

observer.observe(element, {
  attributes: true, // 监控属性更改
  childList: true, // 监控子元素更改
  subtree: true // 监控子元素的子元素更改
});

获取更改详情：
当触发事件时，mutations 参数包含有关更改的详细信息，例如类型、目标元素、添加/删除的节点、属性名称、旧值和新值。

常见用例

MutationObserver 具有广泛的用例，包括：

实时更新用户界面
跟踪 DOM 元素更改
优化性能
检测错误
监控动态内容

代码示例

让我们创建一个 MutationObserver 来实时跟踪输入字段的值变化：

const input = document.querySelector('input');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
      console.log(`输入字段的值更改为：${mutation.target.value}`);
    }
  });
});

observer.observe(input, { attributes: true });