म्यूटेशन ऑब्ज़र्वर की मदद से DOM बदलावों का पता लगाएं

साल 2000 में, Mutation Events API को तय किया गया था, ताकि डेवलपर आसानी से DOM में हुए बदलावों पर प्रतिक्रिया दे सकें. जैसे, DOMNodeRemoved, DOMAttrModified वगैरह.

वेब डेवलपर इस सुविधा का ज़्यादा इस्तेमाल नहीं करते थे. हालांकि, अगर वे पेज में कोई बदलाव होने पर कोई कार्रवाई करना चाहते थे, तो यह Chrome एक्सटेंशन के इस्तेमाल के लिए एक बहुत ही सुविधाजनक और लोकप्रिय उदाहरण पेश करता था.

म्यूटेशन इवेंट काफ़ी काम के होते हैं, लेकिन साथ ही साथ उनकी परफ़ॉर्मेंस से जुड़ी कुछ समस्याएं भी पैदा होती हैं. इवेंट धीमे होते हैं और वे सिंक्रोनस तरीके से बहुत बार सक्रिय होते हैं, जिससे कुछ अनचाहे ब्राउज़र बग पैदा होते हैं.

DOM4 स्पेसिफ़िकेशन में पेश किए गए DOM म्यूटेशन ऑब्ज़र्वर, म्यूटेशन इवेंट की जगह लेंगे. म्यूटेशन इवेंट हर एक बदलाव के लिए धीमे इवेंट ट्रिगर करते हैं, जबकि म्यूटेशन ऑब्ज़र्वर ऐसे कॉलबैक फ़ंक्शन का इस्तेमाल ज़्यादा तेज़ी से करते हैं जिन्हें डीओएम में कई बदलावों के बाद डिलीवर किया जा सकता है.

एपीआई की ओर से दिए जाने वाले बदलावों की सूची को मैन्युअल तरीके से मैनेज किया जा सकता है या म्यूटेशन की खास जानकारी जैसी लाइब्रेरी का इस्तेमाल किया जा सकता है. इससे यह काम आसान हो जाता है और डीओएम में हुए बदलावों की जानकारी पर भरोसा किया जा सकता है.

डीओएम में होने वाले बदलावों का पता लगाने के लिए, Chrome बीटा में म्यूटेशन ऑब्ज़र्वर का इस्तेमाल करना शुरू किया जा सकता है. साथ ही, स्टेबल (Chrome 18) होने पर इसका इस्तेमाल करने के लिए तैयार रहें. अगर फ़िलहाल, काम न करने वाले म्यूटेशन इवेंट का इस्तेमाल किया जा रहा है, तो सिर्फ़ म्यूटेशन ऑब्ज़र्वर पर माइग्रेट करें.

यहां म्यूटेशन इवेंट की मदद से शामिल किए गए नोड की सूची का उदाहरण दिया गया है:

var insertedNodes = [];
document.addEventListener("DOMNodeInserted", function(e) {
    insertedNodes.push(e.target);
}, false);
console.log(insertedNodes);

म्यूटेशन ऑब्ज़र्वर के साथ यह कुछ इस तरह दिखता है:

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.length; i++)
        insertedNodes.push(mutation.addedNodes[i]);
    })
});
observer.observe(document.documentElement, { childList: true });
console.log(insertedNodes);