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

Paul Kinlan

في عام 2000، تم تحديد واجهة برمجة تطبيقات أحداث التبديل لتسهيل تفاعل المطورين مع التغييرات في نموذج العناصر في المستند (DOM) (على سبيل المثال، DOMNodeRemoved و DOMAttrModified وما إلى ذلك).

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

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

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

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

يمكنك البدء في استخدام ميزة "مراقب التغيُّرات" في الإصدار التجريبي من Chrome لرصد التغييرات في نموذج العناصر في المستند (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);