JavaScript
MutationObserver
Learn to use MutationObserver to watch DOM changes.
MutationObserver
MutationObserver is an API that watches the DOM for changes. It can detect nodes added to or removed from an element, attributes that change, or text content that shifts. Instead of polling with setInterval, the browser notifies you when a change happens, which keeps performance healthy.
You first write a callback, then create the observer with new MutationObserver(callback). The observe method says which element and which change types to watch. When you are done, call disconnect to stop observing.
observe options
You pass an options object as the second argument to observe. The most common ones are:
childList: direct child nodes being added or removedattributes: attribute changessubtree: covers the whole descendant treecharacterData: text node contents
You can narrow the attributes with attributeFilter. All default to off; turn on the ones you need.
Callback and MutationRecord
The callback takes two arguments: the mutations array and the observer itself. Each MutationRecord describes a single change. Common fields:
type: childList, attributes, or characterDatatarget: the element that changedaddedNodes and removedNodes: nodes added or removedattributeName: the name of the changed attribute
When several changes arrive together, the array holds multiple records, so loop through them.
Exercise Watch items added to a list
Create a MutationObserver that logs nodes added to the #list element. Turn on the childList option.
Show example solution
1. Create with new MutationObserver((mutations) => {...}).
2. Loop over the mutations array and log addedNodes.
3. Start watching with observer.observe(list, { childList: true }).
Example solution:
const observer = new MutationObserver((mutations) => {
for (const m of mutations) {
for (const node of m.addedNodes) {
console.log(node);
}
}
});
observer.observe(list, { childList: true });
Test yourself
-
Which is a good use case for MutationObserver?
- Tracking whether a button was clicked
- Running code when the page loads
- Noticing items dynamically added to a list
- Following the user's mouse position
Show answer
Noticing items dynamically added to a list — Correct. MutationObserver catches nodes added to or removed from the DOM, like dynamic list updates.
-
Enable childList watching
observer.observe(list, {____});
Show answer
observer.observe(list, {childList: true});
-
Match MutationRecord fields
- type
- Change type
- target
- Changed element
- addedNodes
- Added nodes
- attributeName
- Changed attribute
Next lesson: IntersectionObserver
