如何通过MutationObserver API获取DOM发生突变前的原有状态

是有可行实现方案的，以下是3种常用的落地方式：

方案1：全量DOM快照缓存（适配中小规模DOM节点） #

核心逻辑是提前存储目标节点的完整克隆副本，MutationObserver回调触发时，你持有的副本就是本次突变发生前的状态，回调处理完成后再更新副本即可。
示例代码：

// 选择监听目标
const targetNode = document.getElementById('some-id');
// 初始化时先存储第一份DOM快照（深克隆所有子节点）
let preMutationDom = targetNode.cloneNode(true);

// 监听配置
const config = { attributes: true, childList: true, subtree: true };

// 突变回调
const callback = function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            // preMutationDom 就是本次突变发生前的DOM状态
            console.log('突变前DOM状态：', preMutationDom);
            console.log('本次突变详情：', mutation);
        }
    }
    // 处理完成后更新快照，供下一次突变使用
    preMutationDom = targetNode.cloneNode(true);
};

// 启动监听
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

注意：cloneNode(true) 是深克隆操作，如果目标节点体量极大，会有一定性能开销。

方案2：通过MutationRecord还原状态（性能最优） #

childList 类型的MutationRecord本身已经携带了突变的所有上下文信息，不需要额外缓存全量DOM，你可以直接通过内置字段获取突变前的局部状态：

• mutation.removedNodes：本次突变中被移除的节点列表
• mutation.addedNodes：本次突变中新增的节点列表
• mutation.previousSibling：被修改节点的前一个同级节点
• mutation.nextSibling：被修改节点的后一个同级节点
  如果只需要判断节点的增删情况，直接用以上字段即可，不需要做全量克隆。

方案3：缓存HTML字符串（仅需判断结构文本变化的场景） #

如果不需要操作DOM节点对象，只需要对比结构差异，可以直接缓存innerHTML字符串：

const targetNode = document.getElementById('some-id');
let preHtml = targetNode.innerHTML;

const config = { childList: true, subtree: true };
const callback = function() {
    console.log('突变前HTML：', preHtml);
    console.log('突变后HTML：', targetNode.innerHTML);
    // 更新快照
    preHtml = targetNode.innerHTML;
}

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

内容的提问来源于stack exchange，提问作者Yaron