MutationObserver

在此页

构造函数
方法
Mutation Observer & customize resize event listener & demo
范例
规范
浏览器兼容性
另请参阅
相关话题

MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.

构造函数

MutationObserver(): 创建并返回新 MutationObserver which will invoke a specified callback function when DOM changes occur.

方法

disconnect(): Stops the MutationObserver instance from receiving further notifications until and unless observe() is called again.
observe(): Configures the MutationObserver to begin receiving notifications through its callback function when DOM changes matching the given options occur.
takeRecords(): Removes all pending notifications from the MutationObserver 's notification queue and returns them in a new 数组 of MutationRecord 对象。

Mutation Observer & customize resize event listener & demo

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

范例

The following example was adapted from this blog post .

// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
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.');
        }
    }
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();

规范

规范	状态	注释
DOM The definition of 'MutationObserver' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`MutationObserver`	Chrome 26	Edge 12	Firefox 14	IE 11	Opera 15	Safari 7	WebView Android ≤37	Chrome Android 26	Firefox Android 14	Opera Android 14	Safari iOS 7	Samsung Internet Android 1.5
`MutationObserver()` 构造函数	Chrome 26	Edge 12	Firefox 14	IE 11	Opera 15	Safari 7	WebView Android Yes	Chrome Android 26	Firefox Android 14	Opera Android 14	Safari iOS 7	Samsung Internet Android 1.5
`disconnect`	Chrome 18	Edge 12	Firefox 14	IE 11	Opera 15	Safari 6	WebView Android Yes	Chrome Android 18	Firefox Android 14	Opera Android 14	Safari iOS 6	Samsung Internet Android 1.0
`observe`	Chrome 18	Edge 12	Firefox 14	IE 11	Opera 15	Safari 6	WebView Android ≤37	Chrome Android 18	Firefox Android 14	Opera Android 14	Safari iOS 6	Samsung Internet Android 1.0
`takeRecords`	Chrome 18	Edge 12	Firefox 14	IE 11	Opera 15	Safari 6	WebView Android Yes	Chrome Android 18	Firefox Android 14	Opera Android 14	Safari iOS 6	Samsung Internet Android 1.0

在此页

构造函数

方法

Mutation Observer & customize resize event listener & demo

范例

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题