تعرف على أساسيات نموذج كائن المستند DOM للغة HTML
ما هو DOM؟
يمثل نموذج كائن المستند (DOM) واجهة برمجة لمستندات HTML و XML وهو طريقة للتعبير عن بنية المستند كشجرة من الكائنات حيث يمثل كل كائن جزءًا من هذا المستند.
ويتم تمثيل كل عنصر في المستند كعقدة في شجرة DOM. تمثل العقدة الجذرية للشجرة المستند نفسه وتمثل العقد الفرعية لعقدة الجذر العناصر الموجودة في المستند وقد تحتوي كل عقدة عنصر على عقد فرعية أخرى تمثل سماتها وعناصرها الفرعية ومحتواها النصي.
أهمية معالجة DOM برمجيًا
يسمح لك DOM بمعالجة محتوى وبنية المستند برمجيًا باستخدام لغات مثل جافا سكريبت مما يتيح لك إنشاء صفحات ويب ديناميكية وتفاعلية حيث يمكنك تحديث محتوى الصفحة وتخطيطها استجابةً لإدخال المستخدم أو الأحداث الأخرى.
على سبيل المثال يمكنك استخدام الدالة getElementById للوصول إلى عنصر بواسطة معرّفه الفريد فهذه الدالة تعيد عنصر واحد أو تعيد قيمة فارغة إذا لم يكن هناك عنصر بالمعرف المحدد.
كما يمكن استخدام الدالة getElementsByTagName للوصول إلى مجموعة من العناصر بواسطة اسم الوسم الخاصة بها فهذه الدالة تعيد كافة العناصر التي تملك هذا الوسم المحدد من DOM.
ولدينا الدالة querySelector التي تختار العنصر الأول الذي يطابق محدد CSS المحدد من DOM وتقوم بإرجاع عنصر واحد أو قيمة فارغة إذا لم يتطابق محدد CSS الممرر للدالة مع أي عنصر.
والدالة setAttribute تستخدم لتعديل سمة لعنصر وهي تحتاج وسيطين: اسم السمة والقيمة المراد تعيينها.
element.setAttribute ('href', 'http://example.com');
ولدينا الخاصية innerHTML التي تعدل محتوى HTML للعنصر ويمكنك استخدامها للحصول على محتوى HTML لعنصر أو تعيينه.
وتمثل الخاصية style النمط المضمن للعنصر ويمكنك استخدامها للحصول على نمط عنصر أو تعيينه باستخدام جافا سكريبت.
element.style.color = "red"
كيف يمكن عبور شجرة DOM؟
- يمكن استخدام parentNode و nextSibling و previousSibling للتنقل بين العناصر في شجرة DOM.
- تقوم الخاصية parentNode بإرجاع العقدة الأصلية للعنصر.
- تعرض الخاصية nextSibling العقدة الشقيقة التالية للعنصر (أي العقدة التالية على نفس المستوى في شجرة DOM).
- تُرجع خاصية Sibling العقدة الشقيقة السابقة للعنصر (على سبيل المثال العقدة السابقة على نفس المستوى في شجرة DOM).
- تقوم الخاصية childNodes بإرجاع قائمة بالعقد التابعة لعنصر ما.
- يمكن استخدام الدالة createElement لإنشاء عنصر جديد في الشجرة له وسم محدد.
- يمكن استخدام الدالة appendChild لإضافة عنصر كعنصر تابع لعنصر آخر.
- يمكن استخدام الدالة removeChild لحذف عنصر من DOM.
معالجة الأحداث في DOM
الأحداث هي الإجراءات أو الوقائع التي تحدث في DOM مثل نقر المستخدم على زر أو نموذج يتم إرساله. يسمح لك DOM بإرفاق مستمعي الأحداث بالعناصر مما يسمح لك بتنفيذ التعليمات البرمجية استجابةً للأحداث.
- تقوم الدالة addEventListener بإرفاق مستمع حدث إلى عنصر ويتطلب الأمر ثلاثة وسطاء هي: نوع الحدث المراد الاستماع له والدالة التي سيتم استدعاؤها عند وقوع الحدث وبارامتر خيارات اختياري.
element.addEventListener('click', () => {
console.log('تم النقر على هذا العنصر');
});
تتضمن بعض الأحداث الشائعة التي قد ترغب في الاستماع إليها ما يلي:
- النقر click: يتم تشغيله عند النقر على أحد العناصر.
- أحداث دخول وخروج الماوس mouseover and mouseout: يتم تشغيلها عندما يدخل الماوس على عنصر أو يترك. عنصرًا
- إرسال submit: يتم تشغيله عند إرسال نموذج.
- التركيز focus وفقد التركيز blur: يتم تشغيلها عندما يتلقى عنصر التركيز أو يفقده.
العمل مع المستندات
إليك بعض الخصائص والدوال المفيدة الأخرى للعمل مع المستندات :
يمكن استخدام document.title للوصول إلى عنوان المستند وتعديله.
يمكن استخدام document.body للوصول إلى نص المستند وتعديله.
مثال:
document.body.style.backgroundColor = "red";
يمكن استخدام document.head للحصول على العنصر الرئيسي للمستند.
يمكن استخدام document.forms للحصول على قائمة بالنماذج ضمن المستند.
يمكن استخدام document.scripts للحصول على قائمة بالسكريبتات النصية ضمن المستند.
ترجع الدالة document.getElementsByClassName قائمة بالعناصر باسم الفئة المحدد.
ترجع الدالة document.getElementsByName قائمة بالعناصر بالاسم المحدد.
ترجع الدالة document.querySelectorAll قائمة بالعناصر التي تطابق محدد CSS معين.
