MutationObserver

MutationObserver is a web API that provides a way to react to changes in the DOM. It allows you to register a callback that receives a list of MutationRecord objects whenever the observed DOM tree changes, enabling efficient response to dynamic content without polling.

It was introduced to replace the older Mutation Events system, which ran synchronously and could cause performance issues. MutationObserver delivers changes asynchronously and can batch multiple mutations into a single callback invocation.

Usage involves creating a MutationObserver with a callback function, then calling observe on a target node with options such as childList, attributes, characterData, and subtree. You can refine what to observe with attributeFilter and attributeOldValue or characterDataOldValue. To stop listening, call disconnect. You may call takeRecords to fetch any pending records.

MutationRecord objects describe each change and include fields: type (attributes, childList, characterData), target, addedNodes, removedNodes, previousSibling, nextSibling, attributeName, attributeNamespace, oldValue.

Common usages include monitoring DOM changes in web components, implementing responsive behavior for dynamic interfaces, or triggering side effects when the DOM updates. It is supported in all major browsers as part of the standard DOM MutationObserver interface.