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

构造函数

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

方法

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

示例

以下示例改编自这篇博客

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var 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.');
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

// ES-next version

// Select the node that will be observed for mutations
let targetNode = document.querySelector(`#id`);

// Options for the observer (which mutations to observe)
let config = {
    attributes: true,
    childList: true,
    subtree: true
};

// Callback function to execute when mutations are observed
const mutationCallback = (mutationsList) => {
    for(let mutation of mutationsList) {
        let type = mutation.type;
        switch (type) {
            case "childList":
                console.log("A child node has been added or removed.");
                break;
            case "attributes":
                console.log(`The ${mutation.attributeName} attribute was modified.`);
                break;
            case "subtree":
                console.log(`The subtree was modified.`);
                break;
            default:
                break;
        }
    }
};

// Create an observer instance linked to the callback function
let observer = new MutationObserver(mutationCallback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();



参见

规范

Specification Status Comment
DOM
MutationObserver
Living Standard  

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Implemented with the vendor prefix: Webkit
Edge Full support YesFirefox 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
Edge Mobile Full support YesFirefox 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 Yes
MutationObserver() constructorChrome Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Implemented with the vendor prefix: Webkit
Edge Full support YesFirefox 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
Edge Mobile Full support YesFirefox 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 Yes
observeChrome Full support 18Edge Full support YesFirefox Full support 14IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support Yes
disconnectChrome Full support 18Edge Full support YesFirefox Full support 14IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support Yes
takeRecordsChrome Full support 18Edge Full support YesFirefox Full support 14IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support Yes

Legend

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

文档标签和贡献者

最后编辑者: kilohaty,