A single MutationObserver watches the target element below
for every type of mutation. Use the controls to trigger changes — each one
fires the observer and appears in the log with its full MutationRecord.
1 Observed target element
This element is being watched with
{ childList: true, attributes: true, characterData: true, subtree: true }
child-1 child-2
The highlight flash is applied to the wrapper around this element, not to the
element itself — writing an attribute on an observed node from inside the callback
makes the observer call itself forever.
Children: 2data-status: none
2 Trigger mutations
childList — add or remove a child node
attributes — change an attribute on the target
characterData — edit a text node directly
3 MutationRecord log
No mutations yet — use the controls above…
4 The code running this demo
const target = document.getElementById('target');
let counter = 3;
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
// mutation.type → 'childList' | 'attributes' | 'characterData'
// mutation.target → the node that changed
// mutation.addedNodes → NodeList of added nodes (childList only)
// mutation.oldValue → previous value (if attributeOldValue/
// characterDataOldValue was set)
logMutation(mutation);
}
});
observer.observe(target, {
childList: true,
subtree: true,
attributes: true,
characterData: true,
attributeOldValue: true,
characterDataOldValue: true,
});