مقدمة
في الدرس السابق تعرفنا على JSON، وكيف يمكن استخدامه لتنظيم البيانات وتبادلها بين التطبيقات والخوادم.
لكن JavaScript لا تقتصر على التعامل مع البيانات، بل يمكنها أيضًا التحكم في صفحة الويب نفسها.
وهنا يأتي دور DOM.
ما هو DOM؟
DOM اختصار لـ Document Object Model.
وهو تمثيل لصفحة HTML على شكل هيكل من العناصر يمكن لـ JavaScript الوصول إليه والتعامل معه.
يمكن من خلاله قراءة عناصر الصفحة وتعديلها وإضافة عناصر جديدة أو حذف عناصر موجودة.
لماذا نستخدم DOM؟
يسمح DOM بجعل صفحات الويب تفاعلية.
فعلى سبيل المثال يمكن لـ JavaScript:
تغيير النصوص
تغيير الخصائص
تعديل التنسيق
إضافة عناصر
حذف عناصر
الاستجابة لتفاعل المستخدم
الوصول إلى العناصر
توفر JavaScript عدة طرق للوصول إلى عناصر HTML.
يمكن البحث عن عنصر باستخدام معرفه أو اسمه أو محدد CSS مناسب.
وبعد الوصول إلى العنصر يمكن التعامل معه وتغيير خصائصه.
تغيير محتوى العنصر
يمكن لـ JavaScript تعديل المحتوى الموجود داخل عناصر HTML.
وهذا مفيد عندما نريد تحديث المعلومات المعروضة للمستخدم دون إعادة تحميل الصفحة بالكامل.
تغيير التنسيق
يمكن أيضًا استخدام JavaScript لتعديل بعض خصائص CSS الخاصة بالعناصر.
وبذلك يمكن تغيير مظهر الصفحة استجابةً لتفاعل المستخدم أو لحالة معينة داخل التطبيق.
إضافة وحذف العناصر
لا يقتصر DOM على تعديل العناصر الموجودة.
يمكن لـ JavaScript إنشاء عناصر جديدة وإضافتها إلى الصفحة.
كما يمكن حذف العناصر التي لم تعد مطلوبة.
الأحداث (Events)
من أهم أجزاء DOM الأحداث.
الأحداث هي أشياء تحدث أثناء استخدام الصفحة، مثل:
الضغط على زر
الكتابة في حقل
تحريك مؤشر الفأرة
تحميل الصفحة
يمكن لـ JavaScript الاستماع إلى هذه الأحداث وتنفيذ كود معين عند حدوثها.
DOM والتطبيقات التفاعلية
يعد DOM من الأساسيات المهمة في تطوير الواجهات الأمامية.
فعند تفاعل المستخدم مع صفحة الويب، يمكن لـ JavaScript اكتشاف الحدث ثم تعديل الصفحة وفقًا لذلك.
استخدام DOM في المشاريع
يستخدم DOM في العديد من المشاريع، مثل:
النماذج التفاعلية
القوائم
الآلات الحاسبة
الألعاب البسيطة
صفحات تسجيل الدخول
لوحات التحكم
فوائد DOM
من أهم فوائده:
إنشاء صفحات تفاعلية
تعديل محتوى الصفحة دون إعادة تحميلها
التحكم في عناصر HTML
الاستجابة لتفاعل المستخدم
بناء واجهات أكثر ديناميكية
أخطاء شائعة عند المبتدئين
من الأخطاء الشائعة:
محاولة الوصول إلى عنصر غير موجود
الخلط بين HTML وDOM
عدم فهم الفرق بين العنصر والقيمة الموجودة بداخله
التعامل مع الأحداث بطريقة غير صحيحة
كتابة كود JavaScript قبل التأكد من وجود عناصر الصفحة
ملخص الدرس
تعرفنا في هذا الدرس على DOM في JavaScript، وعرفنا كيف يمثل صفحة HTML وكيف يمكن استخدامه للوصول إلى العناصر وتعديل محتواها وتنسيقها وإضافة عناصر جديدة والتفاعل مع أحداث المستخدم.
في الدرس الخامس والثلاثون سنتعرف على الأحداث (Events) في JavaScript بشكل أعمق، وسنفهم كيف نجعل صفحات الويب تستجيب لتفاعل المستخدم.