97- دروس جافا سكربت – DOM – JS DOM Elements

## مقدمة إلى عناصر DOM في JavaScript

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

### ما هو DOM؟

DOM هو تمثيل شجري لصفحة الويب حيث كل عنصر في HTML يُعتبر كائنًا يمكن الوصول إليه والتعديل عليه بواسطة JavaScript. هذا يعني أنه يمكن للمطورين إضافة أو إزالة أو تعديل العناصر والمحتوى في الصفحة ديناميكيًا.

### الوصول إلى عناصر DOM

يمكن الوصول إلى عناصر DOM باستخدام عدة طرق في JavaScript. من أبرز هذه الطرق:

1. **getElementById**: تستخدم للوصول إلى عنصر باستخدام معرفه الفريد.

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

2. **getElementsByClassName**: تستخدم للوصول إلى مجموعة من العناصر التي تشترك في نفس اسم الفئة.

var elements = document.getElementsByClassName('myClass');
   

3. **getElementsByTagName**: تستخدم للوصول إلى جميع العناصر التي لها نفس اسم العلامة.

var elements = document.getElementsByTagName('div');
   

4. **querySelector**: تستخدم للوصول إلى أول عنصر يطابق مُحدد CSS.

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

5. **querySelectorAll**: تستخدم للوصول إلى جميع العناصر التي تطابق مُحدد CSS.

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

### التفاعل مع عناصر DOM

بمجرد الوصول إلى عنصر DOM، يمكن التفاعل معه بعدة طرق، مثل تعديل النص أو تغيير الأنماط أو التعامل مع الأحداث.

#### تعديل النص والمحتوى

يمكن تعديل النص داخل [شركة برمجة مصرية] عنصر باستخدام الخاصية `textContent` أو `innerHTML`.

var element = document.getElementById('myElement');
element.textContent = 'نص جديد';  // لتغيير النص فقط
element.innerHTML = '<strong>نص جديد</strong>';  // لتغيير محتوى HTML

#### تعديل الأنماط

تتيح لنا الخاصية `style` تعديل CSS الخاص بالعناصر.

var element = document.getElementById('myElement');
element.style.color = 'red';
element.style.backgroundColor = 'yellow';

#### التعامل مع الأحداث

يمكن ربط الأحداث بعناصر DOM للتفاعل مع المستخدم. على سبيل المثال، يمكننا إضافة مستمع حدث للنقر على زر.

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('تم النقر على الزر!');
});

### إضافة وإزالة عناصر DOM

#### إضافة عناصر

يمكن إنشاء عناصر جديدة باستخدام `createElement` وإضافتها إلى DOM باستخدام `appendChild` أو `insertBefore`.

var newElement = document.createElement('p');
newElement.textContent = 'هذا عنصر جديد';
document.body.appendChild(newElement);

#### إزالة عناصر

يمكن إزالة العناصر باستخدام `removeChild`.

var parent = document.getElementById('parentElement');
var child = document.getElementById('childElement');
parent.removeChild(child);

### الخاتمة

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