MutationObserverInit 参数深究：全面解析选项与实例详解

前言

MutationObserver 是一种强大的 JavaScript API，允许开发者在 DOM 发生变化时执行特定操作。要使用 MutationObserver，我们需要实例化一个 MutationObserver 对象并指定其选项，这些选项由 MutationObserverInit 对象定义。

MutationObserverInit 参数

MutationObserverInit 对象包含以下参数：

• attributes : 布尔值，指定是否观察属性的变化。默认为 false。
• attributeFilter : 数组，指定要观察的特定属性。默认为空数组，表示观察所有属性。
• characterData : 布尔值，指定是否观察字符数据的变化。默认为 false。
• characterDataOldValue : 布尔值，指定是否保留字符数据变化前的值。默认为 false。
• childList : 布尔值，指定是否观察子节点列表的变化。默认为 false。
• subtree : 布尔值，指定是否观察子树中的变化。默认为 false。

参数详解

attributes

此参数指定是否观察元素属性的变化。如果为 true，MutationObserver 将在元素属性发生变化时触发回调函数。

示例：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(`属性 "${mutation.attributeName}" 已发生变化，新值为 ${mutation.newValue}`);
  });
});

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

attributeFilter

此参数指定要观察的特定属性。如果指定了一个属性数组，MutationObserver 将只在这些属性发生变化时触发回调函数。

示例：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(`属性 "${mutation.attributeName}" 已发生变化，新值为 ${mutation.newValue}`);
  });
});

observer.observe(document.querySelector('input'), { attributes: true, attributeFilter: ['value', 'placeholder'] });

characterData

此参数指定是否观察元素字符数据的变化。如果为 true，MutationObserver 将在元素字符数据发生变化时触发回调函数。

示例：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(`字符数据已发生变化，新值为 ${mutation.target.textContent}`);
  });
});

observer.observe(document.querySelector('p'), { characterData: true });

characterDataOldValue

此参数指定是否保留字符数据变化前的值。如果为 true，MutationObserver 将在回调函数中提供 oldValue 属性，其中包含字符数据变化前的值。

示例：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(`字符数据已发生变化，旧值为 ${mutation.oldValue}，新值为 ${mutation.target.textContent}`);
  });
});

observer.observe(document.querySelector('p'), { characterData: true, characterDataOldValue: true });

childList

此参数指定是否观察子节点列表的变化。如果为 true，MutationObserver 将在子节点列表发生变化时触发回调函数。

示例：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(`子节点列表已发生变化，新增节点：${mutation.addedNodes}`);
  });
});

observer.observe(document.querySelector('ul'), { childList: true });

subtree

此参数指定是否观察子树中的变化。如果为 true，MutationObserver 将在子树中的任何节点发生变化时触发回调函数。

示例：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(`子树中发生变化，新增节点：${mutation.target}`);
  });
});

observer.observe(document.querySelector('div'), { childList: true, subtree: true });

实例详解

以下是一个完整的示例，展示如何使用 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 });

input.value = '新的值';

总结

通过理解 MutationObserverInit 对象的参数，开发者可以根据需要定制 MutationObserver 的行为。这些参数提供了灵活性和控制，使 MutationObserver 成为监视和响应 DOM 变化的强大工具。通过熟练掌握这些参数，开发者可以提升其前端开发技能，创建更动态和响应式的 Web 应用程序。