96- دروس جافا سكربت – DOM – JS DOM Document

## التفاعل مع DOM باستخدام JavaScript

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

يمكنك الوصول إلى عناصر DOM باستخدام عدة طرق، منها:

1. **getElementById:**

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

2. **getElementsByClassName:**

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

3. **getElementsByTagName:**

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

4. **querySelector و querySelectorAll:**

const element = document.querySelector('.myClass');
   const elements = document.querySelectorAll('div');
   

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

بمجرد الحصول على عنصر، يمكنك تعديل خصائصه أو محتواه:

1. **تغيير النص:**

const heading = document.getElementById('heading');
   heading.textContent = 'نص جديد';
   

2. **تحديث الأنماط:**

const paragraph = document.querySelector('p');
   paragraph.style.color = 'red';
   

3. **تغيير السمات:**

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

### إضافة وحذف العناصر

يمكنك إضافة أو حذف العناصر باستخدام DOM:

1. **إضافة عنصر جديد:**

const newDiv = document.createElement('div');
   newDiv.textContent = 'هذا عنصر جديد';
   document.body.appendChild(newDiv);
   

2. **حذف عنصر:**

const elementToRemove = document.getElementById('removeMe');
   elementToRemove.parentNode.removeChild(elementToRemove);
   

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

يمكنك استخدام DOM للاستماع إلى الأحداث مثل النقرات والتمرير:

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

## الخاتمة

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