94- دروس جافا سكربت – DOM – JS DOM Intro

## مقدمة إلى DOM في JavaScript

DOM، أو Document Object Model، هو واجهة برمجية توفر تمثيلًا برمجيًا للصفحة، مما يسمح للغات البرمجة بالتفاعل مع محتوى وهيكل مستندات HTML وXML. في JavaScript، يُستخدم DOM للوصول إلى وتحديث البنية والمحتوى والأسلوب لصفحات [شركة برمجة مصرية] الويب بشكل ديناميكي.

### مفهوم DOM

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

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

يمكن الوصول إلى عناصر DOM باستخدام طرق مثل `getElementById` و`getElementsByClassName` و`querySelector`. دعونا نلقي نظرة على بعض الأمثلة:

#### [شركة برمجة مصرية] استخدام `getElementById`

// افترض أن لديك عنصر HTML مع المعرّف التالي
// <div id="myElement">Hello World!</div>

let element = document.getElementById('myElement');
console.log(element.textContent); // يطبع: Hello World!

#### استخدام `getElementsByClassName`

// افترض أن لديك العناصر التالية
// <div class="myClass">First Element</div>
// <div class="myClass">Second Element</div>

let elements = document.getElementsByClassName('myClass');
console.log(elements[0].textContent); // يطبع: First Element
console.log(elements[1].textContent); // يطبع: Second Element

#### استخدام `querySelector` و`querySelectorAll`

// استخدام querySelector للحصول على أول عنصر يطابق المحدد
let firstElement = document.querySelector('.myClass');
console.log(firstElement.textContent); // يطبع: First Element

// استخدام querySelectorAll للحصول على جميع العناصر التي تطابق المحدد
let allElements = document.querySelectorAll('.myClass');
allElements.forEach((element) => {
  console.log(element.textContent);
});

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

يمكن استخدام JavaScript لتعديل محتوى وأنماط العناصر في DOM.

#### تغيير النص

let element = document.getElementById('myElement');
element.textContent = 'New Content';

#### تغيير الأنماط

element.style.color = 'red';
element.style.fontSize = '20px';

#### إضافة عناصر جديدة

let newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph!';
document.body.appendChild(newElement);

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

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

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Button was clicked!');
});

### الخاتمة

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