MutationObserver - 提供了监视对 DOM 树所做的更改的功能

MutationObserver 接口提供了监视对 DOM 树所做的更改的功能。它旨在替代 DOM3 事件规范中较旧的 Mutation Events 功能。

构造函数

MutationObserver()

创建并返回一个新的 MutationObserver，它将在 DOM 发生更改时调用指定的回调函数。

方法

disconnect()

停止 MutationObserver 实例接收进一步的通知，直到并且除非再次调用 observe() 为止。

observe()

配置 MutationObserver，当 DOM 发生与给定选项匹配的更改时，通过它的回调函数开始接收通知。

takeRecords()

从 MutationObserver 的通知队列中删除所有待处理的通知，并将它们返回到 MutationRecord 对象的新 Array} 中。

突变观察者，自定义调整大小的事件监听器和演示

https://codepen.io/webgeeker/full/YjrZgg/

实例

以下实例改编自此博客文章。

// 选择将观察到突变的节点
const targetNode = document.getElementById('some-id');

// 观察者的选项（观察哪些突变）
const config = { attributes: true, childList: true, subtree: true };

// 观察到突变时执行的回调函数
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('添加或移除了子节点。');
        }
        else if (mutation.type === 'attributes') {
            console.log('修改了 ' + mutation.attributeName + ' 属性。');
        }
    }
};

// 创建链接到回调函数的观察者实例
const observer = new MutationObserver(callback);

// 开始观察目标节点的配置突变
observer.observe(targetNode, config);

// 晚点，您可以停止观察
observer.disconnect();

规范

规范	状态	备注
DOM MutationObserver 的定义	现行的标准	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• PerformanceObserver
• ResizeObserver
• IntersectionObserver
• 简要概述
• 更深入的讨论
• Chromium 开发者 Rafael Weinstein 的截屏视频