JS MutationObserver
In this page:
const observer = new MutationObserver(callback);
observer.observe(element, { childList: true, attributes: true });
observer.disconnect();What Is MutationObserver?
MutationObserver watches a DOM element for changes. It can detect added, removed, and changed nodes.
This is useful for reacting to DOM changes made by other code (like a third-party widget) that you can't hook into directly with your own event handlers.
उदाहरण: What Is MutationObserver?
<div id="box">Original</div>
<script>
// Declare the constant `observer` as a new `MutationObserver` instance
const observer = new MutationObserver(() => console.log("Something changed"));
observer.observe(document.getElementById("box"), { childList: true, attributes: true, characterData: true, subtree: true });
document.getElementById("box").textContent = "Changed";
</script>Watching Added Nodes
The childList option lets you detect when child nodes are added or removed. This lets you react specifically to structural changes — like a new item appearing in a list — without also being notified about unrelated style or attribute updates.
उदाहरण: Watching Added Nodes
<ul id="list"><li>Item 1</li></ul>
<script>
// Declare the constant `observer` as a new `MutationObserver` instance
const observer = new MutationObserver((mutations) => console.log("Nodes changed:", mutations.length));
// Call `observer.observe(document.getElementById("list"), { childList: true })`
observer.observe(document.getElementById("list"), { childList: true });
// Declare the constant `li`, set to `document.createElement("li")`
const li = document.createElement("li");
// Assign "Item 2" to `li.textContent`
li.textContent = "Item 2";
// Call `document.getElementById("list").appendChild(li)`
document.getElementById("list").appendChild(li);
</script>Watching Attribute Changes
The attributes option detects changes to element attributes such as class or data attributes. This is commonly used to detect when a class toggled by other code (like a loading or active state) actually changes.
उदाहरण: Watching Attribute Changes
<div id="box" class="idle">Status</div>
<script>
// Declare the constant `observer` as a new `MutationObserver` instance
const observer = new MutationObserver(() => console.log("Class changed:", document.getElementById("box").className));
// Call `observer.observe(document.getElementById("box"), { attributes: true })`
observer.observe(document.getElementById("box"), { attributes: true });
document.getElementById("box").className = "active";
</script>Watching Text Changes
The characterData option watches changes to text nodes. subtree can include descendants. This combination is what lets you detect edits to visible text content, which wouldn't otherwise trigger a childList or attributes mutation.
उदाहरण: Watching Text Changes
<p id="text">Hello</p>
<script>
// Declare the constant `observer` as a new `MutationObserver` instance
const observer = new MutationObserver(() => console.log("Text changed"));
// Call `observer.observe(document.getElementById("text"), { characterData: true, subtree: true })`
observer.observe(document.getElementById("text"), { characterData: true, subtree: true });
document.getElementById("text").firstChild.textContent = "Updated";
</script>Stopping an Observer
Call disconnect when you no longer need an observer. This avoids unnecessary work. Because observers keep running (and consuming resources) until explicitly stopped, disconnecting one you no longer need is good practice, not just an optimization.
उदाहरण: Stopping an Observer
<div id="box">Content</div>
<script>
const observer = new MutationObserver(() => console.log("Changed"));
observer.observe(document.getElementById("box"), { childList: true });
observer.disconnect(); // stop watching, avoids unnecessary work
document.getElementById("box").textContent = "Never logged";
</script>Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: