DOM هو اختصار لـ Document Object Model، وهو نموذج يمثل صفحة الويب على شكل هيكل شجري (Tree Structure) يسمح للغات البرمجة مثل JavaScript بالتفاعل مع عناصر الصفحة وتعديلها ديناميكياً. ويُعد DOM من الأساسيات المهمة في تطوير الويب الحديث.
ما هو DOM؟
عندما يتم تحميل صفحة ويب في المتصفح، يقوم المتصفح بتحويل HTML إلى هيكل يسمى DOM. هذا الهيكل يجعل كل عنصر في الصفحة مثل العناوين، الصور، الأزرار، والنصوص عبارة عن “كائنات” يمكن الوصول إليها وتعديلها برمجياً.
بمعنى آخر، DOM هو الوسيط الذي يسمح للبرمجة بالتعامل مع صفحة الويب بعد تحميلها.
كيف يعمل DOM؟
عند فتح أي صفحة ويب:
- يقوم المتصفح بقراءة كود HTML
- يحول العناصر إلى عقد (Nodes) داخل شجرة
- يتم إنشاء نموذج يمكن الوصول إليه عبر JavaScript
- يمكن تعديل العناصر في الوقت الحقيقي
مثال: يمكن تغيير نص زر أو لون صفحة دون إعادة تحميلها باستخدام DOM.
مكونات DOM الأساسية
يتكون DOM من عدة عناصر رئيسية:
- Document: يمثل الصفحة كاملة
- Elements: مثل العناوين، الصور، الأزرار
- Attributes: خصائص العناصر مثل اللون أو الحجم
- Text Nodes: النصوص داخل العناصر
أهمية DOM في تطوير الويب
DOM يلعب دوراً أساسياً في جعل صفحات الويب تفاعلية، لأنه يسمح بـ:
- تغيير المحتوى بشكل ديناميكي
- الاستجابة لأحداث المستخدم (مثل النقر)
- إنشاء تطبيقات ويب حديثة
- تحسين تجربة المستخدم
كيف يتم التعامل مع DOM باستخدام JavaScript؟
يمكن استخدام JavaScript للوصول إلى عناصر الصفحة وتعديلها، مثل:
document.getElementById("title").innerText = "مرحباً";
هذا المثال يغير النص داخل عنصر يحمل المعرف “title”.
الأحداث (Events) في DOM
يدعم DOM التفاعل مع المستخدم من خلال الأحداث مثل:
- النقر (Click)
- التحريك (Hover)
- الإدخال (Input)
- التمرير (Scroll)
نصائح للعمل مع DOM
- قلل التعديلات المتكررة لتحسين الأداء
- استخدم اختيار العناصر بطريقة فعالة
- تجنب التلاعب المباشر غير الضروري
- استخدم مكتبات حديثة عند بناء تطبيقات كبيرة مثل React أو Vue
الفرق بين HTML و DOM
- HTML: هو الكود المكتوب للصفحة
- DOM: هو النسخة الحية التي يتعامل معها المتصفح بعد التحميل
في النهاية، DOM هو الأساس الذي يجعل صفحات الويب تفاعلية وديناميكية، وهو عنصر ضروري لأي مطور ويب لفهم كيفية عمل المتصفحات والتعامل مع عناصر الصفحة بكفاءة.