95- دروس جافا سكربت – DOM – JS DOM Methods

**مقدمة إلى DOM في JavaScript:**

تُعد DOM (Document Object Model) واجهة برمجية تربط صفحات الويب بلغة JavaScript، مما يسمح للمطورين بالتفاعل مع محتوى الصفحة وتحديثه بطريقة ديناميكية. من خلال DOM، يمكن للمطورين الوصول إلى عناصر HTML وتغييرها، مما يفتح الباب أمام إنشاء مواقع وتطبيقات ويب تفاعلية.

**ما هو DOM؟**

DOM هو عبارة عن هيكل شجري يمثل المستندات في المتصفح. كل عنصر HTML، سمة، ونص يُعتبر عقدة في هذا الشجر. تُتيح JavaScript للمطورين التفاعل مع هذه العقد لتحديث الصفحة بدون الحاجة لإعادة تحميلها.

**طرق الوصول إلى عناصر DOM:**

هناك العديد من الطرق التي يمكن استخدامها للوصول إلى عناصر DOM وتحديثها [شركة برمجة مصرية] في JavaScript. إليك بعض الطرق الشائعة مع أمثلة توضيحية:

1. **getElementById:**

تُستخدم هذه الطريقة للوصول إلى عنصر DOM باستخدام معرف العنصر (ID).

var element = document.getElementById('myElement');
   element.style.color = 'blue';
   

في هذا المثال، [شركة برمجة مصرية] يتم تغيير لون النص للعنصر الذي يحمل المعرف `myElement` إلى اللون الأزرق.

2. **getElementsByClassName:**

تُستخدم للوصول إلى جميع العناصر التي تحمل نفس اسم الفئة (class).

var elements = document.getElementsByClassName('myClass');
   for (var i = 0; i < elements.length; i++) {
       elements[i].style.backgroundColor = 'yellow';
   }
   

يتم هنا تغيير لون الخلفية لكل عنصر يحمل الفئة `myClass` إلى اللون الأصفر.

3. **getElementsByTagName:**

تُستخدم للوصول إلى جميع العناصر التي تحمل نفس اسم العلامة (tag).

var elements = document.getElementsByTagName('p');
   for (var i = 0; i < elements.length; i++) {
       elements[i].style.fontSize = '18px';
   }
   

يُغير هذا المثال حجم الخط لجميع عناصر الفقرة `

` إلى 18 بكسل.

4. **querySelector و querySelectorAll:**

تُتيح هاتان الطريقتان استخدام محددات CSS لاختيار عناصر DOM.

var element = document.querySelector('.myClass');
   element.style.border = '1px solid black';

   var elements = document.querySelectorAll('div > p');
   elements.forEach(function(p) {
       p.style.margin = '20px';
   });
   

في المثال الأول، يتم إضافة حدود للعنصر الأول الذي يطابق الفئة `myClass`. وفي المثال الثاني، يتم تعيين هامش لعناصر الفقرة `

` داخل عناصر `

var element = document.getElementById('content');
   element.innerHTML = '<h2>Welcome to JavaScript DOM!</h2>';
   

var element = document.getElementById('content');
   element.textContent = 'Hello, World!';
   

var link = document.querySelector('a');
   link.setAttribute('href', 'https://example.com');
   var href = link.getAttribute('href');