The DOM MutationObserver()
constructor — part of the MutationObserver
interface — creates and returns a new observer which invokes a specified callback when DOM events occur. DOM observation does not begin immediately; the observe()
method must be called first to establish which portion of the DOM to watch and what kinds of changes to watch for.
var observer = new MutationObserver(callback);
callback
MutationRecord
objects describing each change that occurred and the MutationObserver
which invoked the callback. See the example below for more details.A new MutationObserver
object configured to call the specified callback when DOM mutations occur.
This example simply creates a new MutationObserver
configured to watch a node and all of its children for additions and removals of elements to the tree as well as any changes to attributes on any of the elements in the tree.
function callback(mutationList, observer) { mutationList.forEach((mutation) => { switch(mutation.type) { case 'childList': /* One or more children have been added to and/or removed from the tree; see mutation.addedNodes and mutation.removedNodes */ break; case 'attributes': /* An attribute value changed on the element in mutation.target; the attribute name is in mutation.attributeName and its previous value is in mutation.oldValue */ break; } }); }
The callback()
function is invoked when the observer sees changes matching the configuration of the observation request specified when calling observe()
to begin watching the DOM.
The kind of change that took place (either a change to the list of children or a change to an attribute) is detected by looking at the mutation.type
property.
This code actually sets up the observation process.
var targetNode = document.querySelector("#someElement"); var observerOptions = { childList: true, attributes: true, subtree: true //Omit or set to false to observe only changes to the parent node. } var observer = new MutationObserver(callback); observer.observe(targetNode, observerOptions);
The desired subtree is located by finding an element with the ID "someElement". A set of options for the observer is also established in the observerOptions
record. In it, we specify values of true
for both childList
and attributes
, so we get the information we want.
Then the observer is instantiated, specifying the callback()
function, and we begin observing the DOM nodes of interest by calling observe()
, specifying that target node and the options record.
From this point until disconnect()
is called, callback()
will be called each time an element is added to or removed from the DOM tree rooted at targetNode
, or any of those elements' attributes are changed.
Specification | Status | Comment |
---|---|---|
DOM The definition of 'MutationObserver()' in that specification. | Living Standard |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 26
|
Yes | 14 | 11 | 15 | 7
|
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes
|
26
|
Yes | 14 | 14 | 7
|
Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver