رصد تغييرات DOM باستخدام أدوات رصد التغيّرات

Paul Kinlan

في عام 2000، تم تحديد Mutation Events API لتسهيل تفاعل المطوّرين مع التغييرات في عنصر DOM (مثل DOMNodeRemoved وDOMAttrModified وما إلى ذلك).

لم يستخدم مطوّرو الويب هذه الميزة على نطاق واسع، ولكنّها كانت تمثل حالة استخدام ملائمة ورائجة جدًا لإضافات Chrome إذا أرادوا تنفيذ بعض الإجراءات عند تغيير أي عنصر في الصفحة.

تكون أحداث الطفرة مفيدة، ولكنها في الوقت نفسه تتسبّب في بعض مشاكل الأداء. الأحداث بطيئة ويتم تشغيلها بشكل متكرر جدًا بطريقة متزامنة، ما يؤدي إلى ظهور بعض الأخطاء غير المرغوب فيها في المتصفّح.

تمّ تقديم مراقبو تغيُّر نموذج DOM في مواصفات DOM4، وسيحلّون محلّ أحداث التغيُّر. في حين أنّ أحداث Mutation Events تُطلق أحداثًا بطيئة عند كل تغيير، تكون Mutation Observers أسرع باستخدام وظائف الاستدعاء التي يمكن إرسالها بعد تغييرات متعدّدة في DOM.

يمكنك معالجة قائمة التغييرات يدويًا التي تقدّمها واجهة برمجة التطبيقات، أو استخدام مكتبة مثل ملخّص التغيير التي تسهّل هذه المهمة وتضيف طبقة من الموثوقية بشأن التغييرات التي حدثت في DOM.

يمكنك بدء استخدام مراقبي الطفرات في الإصدار التجريبي من Chrome لرصد التغييرات في نموذج DOM والاستعداد لاستخدامه عند طرحه في الإصدار الثابت (Chrome 18). إذا كنت تستخدِم حاليًا "أحداث التغيُّر" التي سيتم إيقافها نهائيًا، ما عليك سوى نقل البيانات إلى "مراقبي التغيُّر".

في ما يلي مثال على إدراج العقد المُدرَجة باستخدام أحداث Mutation:

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

في ما يلي شكلها باستخدام Mutation Observers:

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);