التحكم في هيكل الصفحة (DOM Manipulation) 🏗️

دليل المبرمج للسيطرة على عناصر HTML وتغييرها برمجياً في الوقت الفعلي.

1. مفهوم الـ DOM (Document Object Model)

المهمة: فهم كيف يرى المتصفح صفحتك.

الشرح التفصيلي:

الـ DOM هو خريطة (شجرة) لكل عناصر الصفحة. المتصفح يحول الـ HTML إلى "كائنات" (Objects) يستطيع جافا سكريبت الوصول إليها وتعديلها.

عندما نكتب document في الكود، فنحن نفتح البوابة لهذه الشجرة لنبدأ التحكم فيها.

2. اصطياد العناصر (Selecting Elements)

المهمة: اختيار العنصر الذي تريد تعديله بدقة.

هناك طرق عديدة لاختيار العناصر، وأشهرها:

الكود البرمجي:

// اختيار زر عن طريق الـ ID
const btn = document.getElementById('main-btn');

// اختيار أول عنوان H1 في الصفحة
const title = document.querySelector('h1');

3. التعديل السحري (Changing Content & Style)

المهمة: تغيير النصوص والألوان والأشكال.

بمجرد أن "تمسك" العنصر، يمكنك تغيير أي شيء فيه:

- innerText: لتغيير النص المكتوب.
- style: لتغيير خصائص الـ CSS.
- classList: لإضافة أو حذف "كلاس" كامل.

الكود البرمجي:

const box = document.querySelector('.box');

box.innerText = "تم التحديث!";
box.style.backgroundColor = "blue";
box.classList.add('active');

اختبار مهندس الـ DOM 🧠

س1: أي أمر نستخدمه لتغيير "النص" الموجود داخل عنصر HTML؟



س2: ما هو الأمر الذي يسمح لك باختيار عنصر باستخدام كلاس CSS مثل .header؟