মিউটেশন পর্যবেক্ষকদের সাথে DOM পরিবর্তনগুলি সনাক্ত করুন৷

2000 সালে, মিউটেশন ইভেন্টস এপিআই নির্দিষ্ট করা হয়েছিল যাতে ডেভেলপারদের একটি DOM-এ পরিবর্তনের প্রতিক্রিয়া করা সহজ হয় (যেমন DOMNodeRemoved, DOMAttrModified, ইত্যাদি)।

এই বৈশিষ্ট্যটি ওয়েব ডেভেলপারদের দ্বারা ব্যাপকভাবে ব্যবহৃত হয় নি কিন্তু এটি Chrome এক্সটেনশনগুলির জন্য একটি খুব সুবিধাজনক এবং জনপ্রিয় ব্যবহারের ক্ষেত্রে উপস্থাপন করে যদি তারা পৃষ্ঠায় কিছু পরিবর্তন করার সময় কিছু কাজ করতে চায়।

মিউটেশন ইভেন্ট দরকারী, কিন্তু একই সময়ে তারা কিছু কর্মক্ষমতা সমস্যা তৈরি করে। ইভেন্টগুলি ধীর এবং এগুলিকে একটি সিঙ্ক্রোনাস উপায়ে খুব ঘন ঘন বহিস্কার করা হয়, যা কিছু অবাঞ্ছিত ব্রাউজার বাগ সৃষ্টি করে।

DOM4 স্পেসিফিকেশনে প্রবর্তিত, DOM মিউটেশন পর্যবেক্ষক মিউটেশন ইভেন্টগুলি প্রতিস্থাপন করবে। যেখানে মিউটেশন ইভেন্টগুলি প্রতিটি একক পরিবর্তনের জন্য ধীর ইভেন্টগুলিকে ফায়ার করে, মিউটেশন পর্যবেক্ষকরা কলব্যাক ফাংশনগুলি ব্যবহার করে দ্রুততর হয় যা DOM-এ একাধিক পরিবর্তনের পরে বিতরণ করা যেতে পারে।

আপনি API দ্বারা প্রস্তাবিত পরিবর্তনগুলির তালিকা ম্যানুয়ালি পরিচালনা করতে পারেন, বা মিউটেশন সারাংশের মতো একটি লাইব্রেরি ব্যবহার করতে পারেন যা এই কাজটিকে সহজ করে তোলে এবং DOM-এ সংঘটিত পরিবর্তনগুলি সম্পর্কে নির্ভরযোগ্যতার একটি স্তর যুক্ত করে৷

আপনি DOM-এ পরিবর্তন শনাক্ত করতে ক্রোম বিটাতে মিউটেশন অবজারভার ব্যবহার করা শুরু করতে পারেন এবং যখন এটি স্থিতিশীল হয় (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);