تعلّم JavaScript من الصفرالدرس 7 من 8
التحكم في الصفحة بـ JavaScript: DOM خطوة بخطوة
تعلم DOM في جافاسكريبت: اختيار العناصر بـ querySelector، وتغيير النص والتنسيق والفئات classList، وإنشاء عناصر جديدة وحذفها، مع أمثلة تفاعلية في المتصفح.
محتويات الدرس
DOM (نموذج كائن المستند) هو الطريقة التي يمثل بها المتصفح الصفحة ككائنات تستطيع JavaScript قراءتها وتغييرها. كل وسم HTML يصبح «عقدة» في شجرة.
اختيار العناصر
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
querySelector يأخذ محدد CSS كما تعلمته في دورة CSS: #id و.class وnav a.
تغيير التنسيق والفئات
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
الخصائص (Attributes)
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
إنشاء عناصر جديدة
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
الحذف
element.remove();قراءة الحقول
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
لكن هذا يقرأ القيمة مرة واحدة عند التحميل. لنتفاعل مع ما يكتبه الزائر لحظة كتابته، نحتاج الأحداث في الدرس التالي.
الأسئلة الشائعة
لماذا يعطيني querySelector القيمة null؟
لأن الكود يعمل قبل أن يقرأ المتصفح العنصر. ضع <script> في نهاية body، أو استخدم defer.
هل أحتاج jQuery؟
لا. كل ما كانت jQuery تسهله أصبح موجودًا في JavaScript الحديثة مباشرة.
الخلاصة
querySelectorوquerySelectorAllلاختيار العناصر بمحددات CSS.textContentللنص، وclassListللفئات، والخصائص مثلsrcوhrefمباشرة.createElementوappendلإضافة عناصر، وremoveللحذف.