The MutationObserver API allows tracking changes to the DOM tree, including when elements are added, removed, modified, or have an attribute changed. It can also track changes to an element’s contents or styles, such as the addition or deletion of text or when a style property is modified.
We’ll look at how to use the Mutation API in this article and real-world use cases to see its importance.
Mutation Observer in action
Let’s look at the Mutation Observer API in action right away:
// Usage
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
const el = mutation.target;
if (el.textContent === 'Hello!') {
el.textContent = 'Welcome!';
}
}
});
const textEl = document.getElementById('info');
observer.observe(textEl, { childList: true });
// Test
const changeText = document.getElementById('change-text');
changeText.addEventListener('click', () => {
textEl.textContent = 'Hello!';
});
Create a Mutation Observer
We create a Mutation Observer using the MutationObserver()
constructor. The constructor accepts a callback that will be called when a mutation is detected on an element.
The callback is passed an array of MutationRecord
objects, each containing information about the particular mutation that just occurred.
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
// Process mutations...
}
});
Two essential properties that a MutationRecord
object has are the target
and type
property.
The target
property holds the element that was mutated and type
contains the type of mutation that just occurred. We can use these two properties to identify what kind of mutation happened and take the appropriate action.
For instance, we can check if the mutation was an attribute change, a child node change, or a text node change and then act accordingly. type
can take the following values:
attributes
: attribute changecharacterData
: text node changechildList
: child node change
We can then use this data to take the appropriate action in our callback. For example, if a change to an element’s child nodes is detected, we can update the UI to reflect the new changes.
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
const type = mutation.type;
const element = mutation.target;
console.log(`${mutation.type} mutation on element #${element.id}`);
}
});
Observe changes with Mutation Observer
Once we have created a Mutation Observer, we can use the observe()
method to start observing changes in an element. The observe()
method takes two arguments: the element to observe and the configuration object. The configuration object can contain options to configure what kind of mutations to watch for. These options include childList
, attributes
, and characterData
.
For example, if we want to watch for changes in an element’s child nodes, we can set the childList option to true. Similarly, if we’re going to watch for changes to attributes and text nodes, we can set the attributes
and characterData
option to true
respectively.
Once we have configured our Mutation Observer and started observing changes, we can react to any changes.
Stop watching for changes in element
Once we have started observing changes, we can stop watching for changes at any time by calling the disconnect()
method on the Mutation Observer. This will immediately stop watching for changes in the element, and the observe()
method will no longer be called. This can be useful when you no longer need to watch for changes in an element and want to free up memory and resources.
observer.disconnect();
Use MutationObserver in the real-world
In many cases, you may encounter an external script that brings a range of valuable features and capabilities but brings about unwanted visual effects, like displaying text with content you’d like to customize but can’t. In this type of scenario, Mutation Observer can be used as a workaround. This tool can detect when the text content is changed in the DOM and automatically replace it with something more suitable for the task.
Get all pending mutations with takeRecords()
Mutation Observer is a powerful JavaScript API that detects changes to DOM tree elements, such as added/removed components, changed attributes, altered text content, and changed styles. A practical use is to detect and customize content set by external scripts. Create a Mutation Observer with a callback function and use observe()
it to start monitoring and disconnect()
to end it. takeRecords()
retrieves all pending Mutation Records.
11 Amazing New JavaScript Features in ES13
This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.