JS का MutationObserver
In this page:
const observer = new MutationObserver(callback);
observer.observe(element, { childList: true, attributes: true });
observer.disconnect();MutationObserver क्या है?
MutationObserver बदलावों के लिए किसी DOM element को देखता है। यह जोड़े गए, हटाए गए, और बदले गए nodes का पता लगा सकता है।
यह दूसरे code (जैसे कोई third-party widget) द्वारा किए गए DOM बदलावों पर react करने के लिए उपयोगी है जिनमें आप अपने खुद के event handlers से सीधे hook नहीं कर सकते।
उदाहरण: 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>जोड़े गए Nodes देखना
childList option आपको यह पता लगाने देता है कि कब child nodes जोड़े या हटाए जाते हैं। यह आपको खासतौर पर structural बदलावों पर react करने देता है — जैसे किसी list में एक नया item आना — बिना असंबंधित style या attribute updates के बारे में भी notify हुए।
उदाहरण: 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>Attribute Changes देखना
attributes option class या data attributes जैसे element attributes में बदलाव पता लगाता है। इसका इस्तेमाल आमतौर पर यह पता लगाने के लिए किया जाता है कि कब दूसरे code द्वारा toggle की गई कोई class (जैसे कोई loading या active state) असल में बदलती है।
उदाहरण: 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>Text Changes देखना
characterData option text nodes में बदलाव देखता है। subtree descendants को शामिल कर सकता है। यही combination आपको visible text content में edits पता लगाने देता है, जो वरना कोई childList या attributes mutation trigger नहीं करते।
उदाहरण: 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>एक Observer रोकना
जब आपको किसी observer की ज़रूरत न रहे तो disconnect कॉल करें। यह अनावश्यक काम से बचाता है। चूंकि observers explicitly रोके जाने तक चलते (और resources consume करते) रहते हैं, जिस observer की आपको ज़रूरत नहीं उसे disconnect करना सिर्फ एक optimization नहीं, एक अच्छी practice है।
उदाहरण: 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>- observer callback के अंदर DOM को ऐसे बदलना कि यह खुद को trigger कर दे, जो एक infinite loop का कारण बनता है।
- बिना options object के
observe()कॉल करना, जोTypeErrorthrow करता है;childList,attributesयाcharacterDataset करें। disconnect()भूल जाना, इसलिए observer चलता रहता है।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: