साल 2000 में, म्यूटेशन इवेंट एपीआई को तय किया गया था, ताकि डेवलपर डीओएम (जैसे, 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);