جافا سكربت HTML DOM

من خلال نموذج دليل الوثيقة HTML، يمكن لـ JavaScript الوصول إلى تغيير جميع عناصر الوثيقة HTML.

HTML DOM (نموذج دليل الوثيقة)

عندما يتم تحميل الصفحة، يقوم المتصفح بإنشاء نموذج دليل الوثيقة للصفحة (Document Object Model).

HTML DOM يتم تنظيم النموذج كـشجرة العناصر:

شجرة DOM للعنصر

شجرة DOM HTML

من خلال هذا نموذج الأجراء، يحصل JavaScript على جميع القوى لتوليد HTML ديناميكي:

  • يمكن لـ JavaScript تغيير جميع العناصر HTML في الصفحة
  • يمكن لـ JavaScript تغيير جميع خصائص HTML في الصفحة
  • يمكن لـ JavaScript تغيير جميع أنماط CSS في الصفحة
  • يمكن لـ JavaScript حذف العناصر HTML والأسواق الموجودة بالفعل
  • يمكن لـ JavaScript إضافة عناصر HTML جديدة وأسواق جديدة
  • يمكن لـ JavaScript الرد على جميع الأحداث HTML الموجودة بالفعل في الصفحة
  • يمكن لـ JavaScript إنشاء أحداث HTML جديدة في الصفحة

ماذا ستتعلم

في الفصول التالية من هذا الدليل، ستتعلم:

  • كيفية تغيير محتوى عنصر HTML
  • كيفية تغيير أنماط عناصر HTML (CSS)
  • كيفية التفاعل مع أحداث HTML DOM
  • كيفية إضافة وإزالة عناصر HTML

ما هو DOM؟

DOM هو معيار W3C (World Wide Web Consortium).

يحدد DOM المعيار للاступ على المستند:

“W3C Document Object Model (DOM) هو واجهة مستقلة عن المنصة واللغة، تسمح للبرامج والسكربتات بزيادة الوصول إلى محتوى، الهيكل والنمط للمستندات بشكل ديناميكي.”

يُقسم معيار W3C DOM إلى 3 أجزاء مختلفة:

  • Core DOM - نموذج المستندات لجميع أنواع المستندات
  • XML DOM - نموذج المستندات XML المعياري
  • HTML DOM - نموذج المستندات HTML المعياري

ما هو HTML DOM؟

HTML DOM هو المعيار لـ HTMLالعناصروالموديلاتواجهات البرمجة البرمجية. إنه يعرف:

  • بصفتهاالعناصرعناصر HTML
  • جميع عناصر HTMLالخصائص
  • الوصول إلى جميع عناصر HTMLالطرق
  • جميع عناصر HTMLالأحداث

بمعنى آخر: HTML DOM هو المعيار الذي يحدد كيفية الحصول على تغيير إضافة أو حذف عناصر HTML.