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.
MutationObserver
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
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(const 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 |
---|
DOM Standard # interface-mutationobserver |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
MutationObserver |
26
18
|
12
|
14
|
11
|
15
|
7
6
|
≤37
4.4
|
26
18
|
14
|
14
|
7
6
|
1.5
1.0
|
MutationObserver |
26
18
|
12
|
14
|
11
|
15
|
7
6
|
≤37
4.4
|
26
18
|
14
|
14
|
7
6
|
1.5
1.0
|
disconnect |
18
|
12
|
14
|
11
|
15
|
6
|
4.4
|
18
|
14
|
14
|
6
|
1.0
|
observe |
18
Before Chrome 33,
attributes: true is required when using
attributeFilter or
attributeOldValue . If
attributes: true is not present, then Chrome throws a syntax error.
|
12
Before Edge 79,
attributes: true is required when using
attributeFilter or
attributeOldValue . If
attributes: true is not present, then Edge throws a syntax error.
|
14
Before Firefox 36,
attributes: true is required when using
attributeFilter or
attributeOldValue . If
attributes: true is not present, then Firefox throws a syntax error.
|
11
Internet Explorer requires
attributes: true when using
attributeFilter or
attributeOldValue . If
attributes: true is not present, then Internet Explorer throws a syntax error.
|
15
Before Opera 20,
attributes: true is required when using
attributeFilter or
attributeOldValue . If
attributes: true is not present, then Opera throws a syntax error.
|
6
Before Safari 10.1,
attributes: true is required when using
attributeFilter or
attributeOldValue . If
attributes: true is not present, then Safari throws a syntax error.
|
4.4
Before WebView 4.4.3,
attributes: true is required when using
attributeFilter or
attributeOldValue . If
attributes: true is not present, then WebView throws a syntax error.
|
18
Before Chrome 33,
attributes: true is required when using
attributeFilter or
attributeOldValue . If
attributes: true is not present, then Chrome throws a syntax error.
|
14
Before Firefox 36,
attributes: true is required when using
attributeFilter or
attributeOldValue . If
attributes: true is not present, then Firefox throws a syntax error.
|
14
Before Opera 20,
attributes: true is required when using
attributeFilter or
attributeOldValue . If
attributes: true is not present, then Opera throws a syntax error.
|
6
Before Safari iOS 10.3,
attributes: true is required when using
attributeFilter or
attributeOldValue . If
attributes: true is not present, then Safari throws a syntax error.
|
1.0
Before Samsung Internet 2.0,
attributes: true is required when using
attributeFilter or
attributeOldValue . If
attributes: true is not present, then Samsung Internet throws a syntax error.
|
takeRecords |
18
|
12
|
14
|
11
|
15
|
6
|
4.4
|
18
|
14
|
14
|
6
|
1.0
|
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver