تحديد وتحديث نموذج كائن المستند (DOM): شرح وتمارين وأخطاء شائعة

ماذا يعلّم هذا الدرس فعلًا

حدّد عناصر الصفحة وحدّث النص أو الأصناف بأمان. هذا الدرس جزء من مسار «أساسيات الويب (Web)».

الشرح المتعمّق

نموذج كائن المستند (DOM) شجرة حية لعناصر الصفحة يمكن لجافاسكربت تغييرها. حدّد بـ querySelector ثم حدّث textContent أو classList. فضّل textContent على innerHTML للنص العادي لتجنب مخاطر الحقن من نصوص غير موثوقة. غيّر نص عنوان وبدّل صنف .highlight على فقرة. ابنِ صفحة بفقرة حالة؛ واكتب جافاسكربت يضبط نص الحالة وصنف نجاح. استخدم حلقة علّم←اشرح←بيّن←طبّق في كل مرة تدرس فيها هذه المهارة. تنبّأ بالنتيجة قبل التحقق ثم صحّح

الخطوة الفاشلة فقط دون تغيير عشوائي لكل شيء. اقرأ كل خطوة ثم أعد صياغتها بكلماتك قبل التنفيذ. فضّل دورات صغيرة قابلة للتحقق على قفزات كبيرة بلا اختبار. عند ظهور خلل غيّر متغيراً واحداً فقط ثم أعد التحقق من الناتج. احتفظ بملاحظة بسطر واحد لقاعدة القرار حتى يبدأ الجلسة التالية أسرع. أغلق الحلقة باختبار ذاتي قصير يثبت المهارة لا الألفة فقط. اربط الفكرة بموقف واقعي من عملك أو دراستك خلال هذا الأسبوع. تجنّب النسخ الأعمى

وركّز على السبب الذي يجعل الخطوة تعمل. راجع الأخطاء فور حدوثها واكتب سبب الخطأ بجملة واضحة واحدة. اقرأ كل خطوة ثم أعد صياغتها بكلماتك قبل التنفيذ.

تطبيق عملي

**مثال** document.querySelector('#status').textContent = 'تم الحفظ';

أخطاء شائعة

• innerHTML بمدخل غير موثوق • افتراض أن querySelector يجد دائماً بلا فحص • تحرير عنصر خاطئ بسبب محددات غامضة