认识

2024年04月17日

柏拉文

越努力，越幸运

一、认识

---

MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。

二、语法

---

function mutationObserverCallback(mutationList, observer) {
    mutationList.forEach((mutation) => {
        switch (mutation.type) {
            case "subtree":
                console.log(mutation);
                observer.disconnect(); // 按需调用
                break;
            case "childList":
                console.log(mutation);
                observer.disconnect(); // 按需调用
                break;
            case "attributes":
                console.log(mutation);
                observer.disconnect(); // 按需调用
                break;
            case "characterData":
                console.log(mutation);
                observer.disconnect(); // 按需调用
                break;
            default:
                console.log(mutation);
        }
    });
}

const observer = new MutationObserver(mutationObserverCallback);

• callback: 一个回调函数，每当被指定的节点或子树以及配置项有 DOM变动时会被调用。回调函数拥有两个参数:

  • 一个是描述所有被触发改动的 MutationRecord 对象数组

  • 另一个是调用该函数的 MutationObserver 对象。

• observer: 一个新的、包含监听 DOM 变化回调函数的 MutationObserver 对象。

四、操作

---

4.1 环境检测

描述 检测运行环境是否支持 MutationObserver

function isNative(Ctor){
    return typeof Ctor === 'function' && /native code/.test(Ctor.toString());
}

function isSupportMutationObserver(){
    return typeof MutationObserver !== 'undefined' && isNative(MutationObserver);
}