جافا سكريبت HTML DOM
باستخدام HTML DOM ، يمكن لـ JavaScript الوصول إلى جميع عناصر مستند HTML وتغييرها.
HTML DOM (نموذج كائن المستند)
عندما يتم تحميل صفحة ويب ، يقوم المستعرض بإنشاء ملف D ocument O bject M للصفحة.
تم إنشاء نموذج HTML DOM كشجرة من الكائنات :
شجرة كائنات HTML DOM
باستخدام نموذج الكائن ، تحصل JavaScript على كل القوة التي تحتاجها لإنشاء HTML ديناميكي:
- يمكن لـ JavaScript تغيير جميع عناصر HTML في الصفحة
- يمكن لـ JavaScript تغيير جميع سمات HTML في الصفحة
- يمكن لـ JavaScript تغيير جميع أنماط CSS في الصفحة
- يمكن أن يزيل JavaScript عناصر وسمات HTML الموجودة
- يمكن لـ JavaScript إضافة سمات وعناصر HTML جديدة
- يمكن أن يتفاعل JavaScript مع جميع أحداث HTML الموجودة في الصفحة
- يمكن لـ JavaScript إنشاء أحداث HTML جديدة في الصفحة
ماذا ستتعلم
ستتعلم في الفصول التالية من هذا البرنامج التعليمي:
- كيفية تغيير محتوى عناصر HTML
- كيفية تغيير نمط (CSS) لعناصر HTML
- كيف تتفاعل مع أحداث HTML DOM
- كيفية إضافة وحذف عناصر HTML
ما هو DOM؟
يعد DOM أحد معايير W3C (اتحاد شبكة الويب العالمية).
يحدد DOM معيارًا للوصول إلى المستندات:
"نموذج كائن المستند (DOM) من W3C هو نظام أساسي وواجهة لغة محايدة تسمح للبرامج والنصوص بالوصول الديناميكي إلى محتوى المستند وهيكله ونمطه وتحديثه."
ينقسم معيار W3C DOM إلى 3 أجزاء مختلفة:
- Core DOM - نموذج قياسي لجميع أنواع المستندات
- XML DOM - النموذج القياسي لوثائق XML
- HTML DOM - النموذج القياسي لوثائق HTML
ما هو HTML DOM؟
HTML DOM هو نموذج كائن قياسي وواجهة برمجة لـ HTML. تحدد:
- عناصر HTML ككائنات
- خصائص جميع عناصر HTML
- طرق الوصول إلى جميع عناصر HTML
- الأحداث لجميع عناصر HTML
بمعنى آخر: HTML DOM هو معيار لكيفية الحصول على عناصر HTML أو تغييرها أو إضافتها أو حذفها.