جافا سكربت HTML DOM

من خلال نموذج مستند الأهداف HTML، يمكن لتجسيم JavaScript الوصول وتغيير جميع العناصر في مستند HTML.

HTML DOM (نموذج مستند الأهداف)

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

HTML DOM يُقسم النموذج إلىشجرة الأهداف:

شجرة DOM للأهداف

شجرة DOM HTML

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

  • يمكن لتجسيم JavaScript تغيير جميع العناصر HTML في الصفحة
  • يمكن لتجسيم JavaScript تغيير جميع خصائص HTML في الصفحة
  • يمكن لتجسيم JavaScript تغيير جميع أنماط CSS في الصفحة
  • يمكن لتجسيم JavaScript حذف العناصر والخصائص الموجودة مسبقًا
  • يمكن لتجسيم JavaScript إضافة عناصر HTML جديدة وأسماء الخصائص
  • يمكن لتجسيم JavaScript الاستجابة إلى جميع الأحداث الموجودة مسبقًا في الصفحة
  • يمكن لتجسيم 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.