في هذا الدرس 6تصفّح المواضيع
إن كتابة عشرات أسطر التنسيق المباشر عبر el.style يخلط التصميم بالمنطق البرمجي ويعطل توافق الوضع الداكن والشاشات المتجاوبة. لذا تكمن الممارسة الاحترافية في تعريف الفئات داخل ملف CSS ثم التبديل بينها بنظافة عبر الكائن المدمج el.classList!
بخلاف الكتابة فوق السلسلة el.className = "active" التي تمسح بقية فئات العنصر بالخطأ، تضيف الدالة el.classList.add("active", "highlighted") فئة أو عدة فئات بأمان وتتجاهل التكرار تلقائياً إن كانت موجودة مسبقاً:
| صيغة الدالة | الوظيفة المنفذة | القيمة المرجعة |
|---|---|---|
classList.add("a", "b") | تضيف فئة أو أكثر دون تكرار أو مسح لسواها | undefined |
classList.remove("a", "b") | تسحب الفئات المحددة بهدوء | undefined |
classList.toggle("open", force?) | تعكس وجود الفئة أو تفرض حالة منطقية | قيمة منطقية لوجود الفئة بعدها |
classList.contains("open") | تختبر امتلاك العنصر للفئة حالياً | true أو false |
classList.replace("old", "new") | تستبدل الفئة القديمة بالجديدة بخطوة واحدة | true عند نجاح الاستبدال |
تسحب الدالة el.classList.remove("is-invalid") الفئات المذكورة وحدها وتترك الفئات الهيكلية الأساسية للعنصر سليمة تماماً، كما لا تطلق أي خطأ إذا كانت الفئة غير موجودة أصلاً.
تضيف الدالة el.classList.toggle("expanded") الفئة إن غابت وتحذفها إن وجدت وترجع حالتها المنطقية الجديدة. والأجمل أن تمرير وسيط منطقي ثانٍ مثل el.classList.toggle("has-error", score < 50) يختصر جملة if...else كاملة في سطر واحد حاسم!
function flipDetails() {
const panel = document.getElementById('faq-body');
const isOpen = panel.classList.toggle('open-panel');
document.getElementById('faq-btn').textContent = isOpen ? 'Hide Answer' : 'Show Answer';
}انتبه لاسم الدالة الدقيق هنا: فبينما تستخدم المصفوفات includes()، يستخدم كائن الفئات الدالة el.classList.contains("active")! وهي تطابق الكلمة الكاملة للفئة بدقة، فلا تخلط بين "btn" و"btn-large".
بدلاً من استدعاء الحذف ثم الإضافة في سطرين منفصلين، تنجز el.classList.replace("status-draft", "status-published") التبديل في خطوة واحدة نظيفة وترجع true إذا عثرت على الفئة القديمة واستبدلتها.
function approveOrder() {
const pill = document.getElementById('order-pill');
if (pill.classList.contains('is-pending')) {
pill.classList.replace('is-pending', 'is-approved');
pill.textContent = 'Status: Approved';
}
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس إدارة فئات التنسيق بنظافة عبر el.classList باستخدام دوال add وremove وtoggle المشروطة والفحص عبر contains والتبديل الذري عبر replace. الخطوة التالية: اختتم الفصل التاسع بدرس «مجموعات العناصر DOM Collections في JavaScript» لاستكشاف مجموعات المستند الجاهزة وتحويلها عبر Array.from().
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Element.classList كائن قائمة الفئات classList
- خاصية حية توفر دوال منظمة لإضافة وحذف وعكس وفحص واستبدال فئات التنسيق على العنصر.
- للمراجعة
- 02 classList.toggle(cls, force) دالة العكس والفرض الشرطي toggle
- تعكس وجود الفئة تلقائياً، أو تفرض إضافتها وحذفها حسماً عند تزويدها بوسيط منطقي ثانٍ.
- للمراجعة
- 03 classList.contains() دالة فحص انتماء الفئة contains
- تتحقق من وجود اسم الفئة الكامل ضمن قائمة فئات العنصر وترجع صواب أو خطأ بدقة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 FAQ FAQ
- Frequently Asked Questions
- نمط الأسئلة الشائعة التفاعلي الذي يُبنى بسلاسة عبر عكس الفئة بدالة toggle.
- للمراجعة
- 02 ARIA ARIA
- Accessible Rich Internet Applications
- سمات الوصول المساندة التي تُحدث بالتوازي مع تبديل الفئات البصرية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال الأكورديون وانقر الزر عدة مرات لملاحظة كيف تتحكم القيمة المرجعة من toggle بنص الزر وإظهار الفقرة.
-
افتح مثال حالة الطلب وانقر زر الاعتماد لمشاهدة تبدل اللون والفئة من الانتظار إلى القبول فوراً.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.