DOM (نموذج كائن الصفحة) – تعلم مفاهيمه في JavaScript

DOM هو مفتاح فهم كيفية تعديل صفحات الويب بشكل ديناميكي. في هذا المقال، سنستعرض بعض الأمثلة لفهم مفاهيم DOM بشكل أفضل. لا تتردد في تجربة هذه الأمثلة على صفحتك الخاصة والاستفادة منها في تطوير موقعك.

الوصول إلى العناصر في DOM

استخدام `getElementById` للوصول إلى عنصر بناءً على”id”:

const element = document.getElementById('myElement');

استخدام `querySelector` للوصول إلى عنصر باستخدام CSS Selectors:

const element = document.querySelector('.myClass');

استخدام `querySelectorAll` للوصول إلى مجموعة من العناصر باستخدام CSS Selectors:

const elements = document.querySelectorAll('.myClass');

تعديل المحتوى والخصائص في DOM

تعديل نص العنصر:

element.textContent = 'محتوى جديد';

تعديل خاصية محددة في العنصر:

element.setAttribute('src', 'new-image.jpg');

الأحداث والتفاعل في DOM

استخدام `addEventListener` للتفاعل مع الأحداث:

element.addEventListener('click', function() {

  // الكود الذي يتم تنفيذه عند النقر على العنصر

});

الاستنتاج

DOM هو جزء أساسي في برمجة الويب بواسطة JavaScript. يسمح لنا بالتلاعب بعناصر الصفحة وتعديلها والتفاعل معها بشكل ديناميكي. تعلم مفاهيم DOM سيمكنك من تطوير تجارب المستخدم الأكثر تفاعلاً وإنشاء تطبيقات الويب القوية. ابدأ في استكشاف المزيد من أمثلة DOM واستخدمها في تطوير مشاريعك القادمة. حظًا موفقًا! 💪

إذا كان لديك أي أسئلة، فلا تتردد في طرحها في التعليقات أدناه. سنكون سعداء بمساعدتك!