MutationObserver

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

构造函数

MutationObserver()
创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。

方法

disconnect()
阻止 MutationObserver 实例继续接收的通知,直到再次调用其observe()方法,该观察者对象包含的回调函数都不会再被调用。
observe()
配置MutationObserver在DOM更改匹配给定选项时,通过其回调函数开始接收通知。
takeRecords()
从MutationObserver的通知队列中删除所有待处理的通知,并将它们返回到MutationRecord对象的新Array中。

Mutation Observer & customize resize event listener & demo

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) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后,可停止观察
observer.disconnect();

规范

规范 状态 注释
DOM
MutationObserver
Living Standard

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
MutationObserverChrome Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Edge Full support 12Firefox Full support 14IE Full support 11Opera Full support 15Safari Full support 7
Full support 7
No support 6 — 7
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
WebView Android Full support ≤37
Full support ≤37
No support ≤37 — ≤37
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Chrome Android Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Firefox Android Full support 14Opera Android Full support 14Safari iOS Full support 7
Full support 7
No support 6 — 7
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Samsung Internet Android Full support 1.5
Full support 1.5
No support 1.0 — 1.5
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
MutationObserver() constructorChrome Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Edge Full support 12Firefox Full support 14IE Full support 11Opera Full support 15Safari Full support 7
Full support 7
No support 6 — 7
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
WebView Android Full support Yes
Full support Yes
No support ? — ?
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Chrome Android Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Firefox Android Full support 14Opera Android Full support 14Safari iOS Full support 7
Full support 7
No support 6 — 7
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Samsung Internet Android Full support 1.5
Full support 1.5
No support 1.0 — 1.5
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
disconnectChrome Full support 18Edge Full support 12Firefox Full support 14IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 14Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.0
observeChrome Full support 18Edge Full support 12Firefox Full support 14IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 14Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.0
takeRecordsChrome Full support 18Edge Full support 12Firefox Full support 14IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 14Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见