الـ DOM (Document Object Model) هو أحد الأساسيات الرئيسية في تطوير الويب باستخدام لغة JavaScript. يعتبر الـ DOM بنية صفحة الويب نفسها، وتُمثلها كشجرة تحتوي على عناصر متعددة يمكن التحكم بها بواسطة JavaScript لتغيير المحتوى والتنسيق وتفعيل التفاعل مع الأحداث. في هذا المقال، سنستكشف الأساسيات الخاصة بالـ DOM وكيفية استخدامها بالتفصيل مع لغة JavaScript.
ما هو الـ DOM؟
يشرح هذا الجزء مفهوم الـ DOM وكيفية تمثيل هيكل الصفحة الويب كشجرة من العناصر.
يقوم الكود بالحصول على العنصر بواسطة ال DOM ووظيفة getElementById التي تسترجع عنصرًا واحدًا بناءً على معرفه (element) في الصفحة.
استرجاع العناصر من الـ DOM
يوضح هذا الجزء كيفية استخدام JavaScript لاسترجاع العناصر من الـ DOM باستخدام وظائف التحديد (querySelector).
هنا، يتم استخدام وظيفة querySelectorAll لاسترجاع جميع العناصر التي تحمل الصفة className المحددة.
تعديل العناصر في الـ DOM
يوضح هذا الجزء كيفية تعديل العناصر في الـ DOM باستخدام JavaScript، مثل تغيير النص والأنماط والمحتوى.
هنا يتم تغيير نص العنصر باستخدام خاصية textContent وتغيير لون العنصر بواسطة خاصية style.color.
إضافة وحذف العناصر في الـ DOM
يشرح هذا الجزء كيفية إضافة وحذف العناصر في الـ DOM باستخدام JavaScript.
هنا، يتم إنشاء عنصر جديد باستخدام وظيفة createElement وإضافته كطفل لعنصر parent باستخدام appendChild.
التفاعل مع الأحداث في الـ DOM
يوضح هذا الجزء كيفية التفاعل مع الأحداث في الـ DOM باستخدام JavaScript.
يتم استخدام وظيفة addEventListener لتعيين وظيفة تنفيذية تُطبق عند حدوث حدث النقر.
الختام
يعد فهم أساسيات الـ DOM واستخدامها مع JavaScript أمرًا مهما في تطوير الويب. من خلال التلاعب بالعناصر والأحداث والأنماط، يمكن للمطورين إنشاء تجارب متفاعلة وديناميكية على الويب. حاول استخدام الـ DOM وتطبيقها في مشاريعك الخاصة وتحسين مهاراتك بالتدريب المستمر.