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

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

### ما هو DOM؟

DOM هو تمثيل شجري للمستندات HTML أو XML. يتم إنشاء هذه الشجرة بحيث يكون كل عنصر (مثل وسم HTML) عبارة عن عقدة في هذه الشجرة. يتيح DOM للمطورين إمكانية الوصول إلى هذه العقد وتعديلها برمجيًا، مما يتيح إمكانية بناء صفحات ويب ديناميكية وتفاعلية.

### كيف يعمل DOM؟

عند تحميل صفحة ويب في المتصفح، يقوم المتصفح بتحليل مستند HTML وتحويله إلى مجموعة من الكائنات التي يمكن الوصول إليها والتفاعل معها باستخدام JavaScript. هذه الكائنات تشكل الشجرة التي تعرف بـ DOM Tree.

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

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

#### 1. استخدام `getElementById`

يمكنك الوصول إلى عنصر محدد باستخدام معرفه الفريد (ID):

“`html

Hello, World!

const header = document.getElementById(‘header’);
console.log(header.textContent); // Output: Hello, World!

“`

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

يمكنك الحصول على قائمة من العناصر التي تشترك في نفس الفئة (class):

“`html

First paragraph.

Second paragraph.

const paragraphs = document.getElementsByClassName(‘text’);
for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].textContent);
}
// Output: First paragraph. Second paragraph.

“`

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

هذه الطرق تقدم مرونة أكبر باستخدام أساليب اختيار مشابهة لـ CSS:

“`html

const container = document.querySelector(‘.container’);
console.log(container.textContent); // Output: Hello, DOM!

const allParagraphs = document.querySelectorAll(‘.text’);
allParagraphs.forEach(paragraph => {
console.log(paragraph.textContent);
});

“`

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

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

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

“`html

Old message

const message = document.getElementById(‘message’);
message.textContent = ‘New message’;

“`

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

“`html

• Item 1
• Item 2

const list = document.getElementById(‘list’);
const newItem = document.createElement(‘li’);
newItem.textContent = ‘Item 3’;
list.appendChild(newItem);

“`

### الخاتمة

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