The 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.
Constructor
MutationObserver()
- Creates and returns a new
MutationObserver
which will invoke a specified callback function when DOM changes occur.
Methods
disconnect()
- Stops the
MutationObserver
instance from receiving further notifications until and unlessobserve()
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 newArray
ofMutationRecord
objects.
Mutation Observer & customize resize event listener & demo
https://codepen.io/webgeeker/full/YjrZgg/
Example
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();
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'MutationObserver' in that specification. |
Living Standard |
Browser compatibility
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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
MutationObserver | Chrome
Full support
26
| Edge Full support 12 | Firefox Full support 14 | IE Full support 11 | Opera Full support 15 | Safari
Full support
7
| WebView Android
Full support
≤37
| Chrome Android
Full support
26
| Firefox Android Full support 14 | Opera Android Full support 14 | Safari iOS
Full support
7
| Samsung Internet Android
Full support
1.5
|
MutationObserver() constructor | Chrome
Full support
26
| Edge Full support 12 | Firefox Full support 14 | IE Full support 11 | Opera Full support 15 | Safari
Full support
7
| WebView Android
Full support
Yes
| Chrome Android
Full support
26
| Firefox Android Full support 14 | Opera Android Full support 14 | Safari iOS
Full support
7
| Samsung Internet Android
Full support
1.5
|
disconnect | Chrome Full support 18 | Edge Full support 12 | Firefox Full support 14 | IE Full support 11 | Opera Full support 15 | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 14 | Opera Android Full support 14 | Safari iOS Full support 6 | Samsung Internet Android Full support 1.0 |
observe | Chrome Full support 18 | Edge Full support 12 | Firefox Full support 14 | IE Full support 11 | Opera Full support 15 | Safari Full support 6 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 14 | Opera Android Full support 14 | Safari iOS Full support 6 | Samsung Internet Android Full support 1.0 |
takeRecords | Chrome Full support 18 | Edge Full support 12 | Firefox Full support 14 | IE Full support 11 | Opera Full support 15 | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 14 | Opera Android Full support 14 | Safari iOS Full support 6 | Samsung 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.