MutationObserver

MutationObserver is a browser API that watches a part of the DOM and calls you back with a list of exactly what changed — nodes added or removed, attributes edited, or text rewritten.

Learn MutationObserver in our free JavaScript course — an interactive lesson with runnable examples, a practice exercise and a quick reference.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

It is how you react to DOM you do not control: a widget injecting elements, content loaded by another script, or attributes flipping as a page updates itself.

💡 About the runnable demos: The real MutationObserver needs a live DOM, so it stays in the read-only code blocks. Each Try it Yourself runs a plain-JS diff that reports what changed between two snapshots of a tree — the same "here is the list of changes" shape that real mutation records give you.

📹 Real-World Analogy: A MutationObserver is a security camera pointed at one room. You do not stare at the feed all day; the system hands you a highlight reel of everything that moved while you were away — "a box was added here, a label was changed there". You choose what the camera watches (nodes, attributes, text) and review the clips in a batch.

Create an observer with a callback, then call observe(target, options) to choose what to watch. The callback receives an array of MutationRecord objects, each describing one change: its type ( "childList" , "attributes" , or "characterData" ), the affected node, and lists of addedNodes / removedNodes .

At its heart, this is a diff : compare "before" and "after" and report what was added or removed. Here is that diff running for real:

Turn on attributes: true to be told when an attribute changes; add attributeOldValue: true and each record carries the previous value in oldValue . Turn on characterData: true to catch edits to text node contents. You can also restrict attribute watching to specific names with attributeFilter .

The same "what changed" diff, now over an object's attributes:

Replace the blank with the option that makes the observer watch added/removed children.

Records are batched and delivered as a microtask after the current script runs, so several quick DOM edits arrive together. Call disconnect() to stop observing entirely. Call takeRecords() to pull out any queued-but-not-yet-delivered records immediately — handy right before disconnecting so nothing is lost.

⚠️ Avoid infinite loops: If your callback edits the same DOM it observes, it can trigger itself forever. Either disconnect() before editing and re-observe after, or guard against the change you just made.

This model batches changes into a queue, then lets you drain it and stop — exactly like the real API:

Replace the blank with the method that stops the observer.

childList: true . Add subtree: true to watch all descendants too.

Pass attributeOldValue: true ; the record then has oldValue .

takeRecords() keeps observing (it just drains the queue); disconnect() stops entirely.

Combine both ideas: write a diffTree that reports added children, removed children, AND changed attributes between two snapshots — a tiny version of what MutationObserver hands you.

Up next: IndexedDB — a real database in the browser. 🗄️

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary