MutationObserver实例中mutation三种不同突变类型的属性与方法？

2026-03-19 02:56:26 415 分享链接 开发笔记 MutationObserver

在 MutationObserver 的回调中，mutation 实际上是 MutationRecord 对象的实例，它包含了本次 DOM 突变的详细信息。MutationRecord 主要通过属性（而非方法）来提供突变数据，不同类型的突变（childList/attributes/characterData）会包含不同的属性。

所有 MutationRecord 共有的核心属性

无论突变类型是什么，以下属性始终存在：

按突变类型区分的特有属性

1. 当 type === "childList"（子节点添加/移除）时

包含描述子节点变化的属性：

2. 当 type === "attributes"（属性变化）时

包含描述属性变化的属性：

3. 当 type === "characterData"（文本节点内容变化）时

包含描述文本内容变化的属性：

注意：MutationRecord 没有公开方法

MutationRecord 是一个数据记录对象，仅用于存储突变信息，因此它没有公开的方法，所有信息都通过上述属性获取。

示例：根据突变类型使用不同属性

const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    console.log("突变类型：", mutation.type);
    console.log("受影响的节点：", mutation.target);

    if (mutation.type === "childList") {
      // 处理子节点变化
      console.log("添加的节点：", Array.from(mutation.addedNodes));
      console.log("移除的节点：", Array.from(mutation.removedNodes));
    } else if (mutation.type === "attributes") {
      // 处理属性变化
      console.log("变化的属性名：", mutation.attributeName);
      console.log("旧值：", mutation.oldValue);
    } else if (mutation.type === "characterData") {
      // 处理文本内容变化
      console.log("文本旧值：", mutation.oldValue);
      console.log("新值：", mutation.target.nodeValue); // 新值直接从 target 取
    }
  }
});

通过这些属性，你可以精确判断 DOM 发生了哪种变化，以及变化的具体细节（如哪些节点被添加、哪个属性被修改等）。