ما هو DOM؟ اقرأ الفكرة ثم شاهدها بالعربية

ملف HTML نصّ تصفه للمتصفّح. بعد قراءته، يبني المتصفّح تمثيلاً منظّماً للعناصر وعلاقاتها يمكن للبرامج التعامل معه. هذا التمثيل هو DOM: نموذج كائنات المستند.

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

#شاهد مقدمة عربية

الفيديو التالي من قناة Elzero Web School، بعنوان «What is DOM?»، وهو مورد خارجي من سلسلة شرح DOM بالعربية. يبدأ تحميل مشغّل YouTube عند ضغطك على الصورة. تبقى ملكية الفيديو لصاحبه.

▶

#اختبر الفكرة بعد المشاهدة

أنشئ صفحة صغيرة فيها عنوان يحمل id اسمه greeting، ثم افتح أدوات المطوّر في المتصفّح واكتب:

const title = document.querySelector('#greeting');
title.textContent = 'أهلاً من JavaScript';

سترى النص يتغيّر فوراً. الآن حدّث الصفحة: يعود النص الذي كتبتَه في ملف HTML. لقد غيّرت حالة المستند أثناء تشغيل الصفحة، ولم تحفظ تعديلاً في الملف الأصلي.

#سؤال يساعدك على الفهم

ماذا يحدث إن لم يوجد عنصر يحمل هذا الاسم؟ تعيد querySelector القيمة null. محاولة تغيير textContent بعدها ستسبّب خطأ. لذلك ابدأ بالتأكد من أن العنصر موجود، وأن البرنامج يعمل بعد قراءة المتصفّح لذلك الجزء من HTML.

ابدأ بعنصر واحد وحدث واحد. حين تفهم العلاقة بين الملف، والمستند في الذاكرة، وما يظهر على الشاشة، ستصبح واجهات JavaScript أقل غموضاً.