في هذا الدرس 4تصفّح المواضيع
نظراً لأن الكلمة class محجوزة في لغة JavaScript لتعريف الفئات البرمجية، اختار معيار DOM الاسم element.className لتمثيل سمة class="..." الخاصة بعنصر HTML.
ترجع قراءة element.className على عناصر HTML السلسلة النصية الكاملة كما هي مفصولةً بمسافات مثل "btn btn-primary shadow-sm" دفعةً واحدة.
يؤدي الإسناد المباشر card.className = "active" إلى مسح واستبدال كامل نص السمة، فتختفي فوراً فئات التخطيط الأساسية مثل "card" و"rounded"! وحتى محاولة الدمج اليدوي عبر card.className += " active" هشة ومعرضة للأخطاء؛ إذ يؤدي نسيان المسافة البادئة إلى التصاق الأسماء ("cardactive") وتكرار النقرات يراكم نفس الفئة عدة مرات.
const bad = document.getElementById('badCard');
const good = document.getElementById('goodCard');
// Overwrites existing "card bordered" classes!
bad.className = 'highlight';
// Preserves existing classes safely!
good.classList.add('highlight');ترجع element.classList كائن DOMTokenList ذكياً يمنع تكرار الفئات ويعالج كل فئة باستقلالية تامة دون المساس بجاراتها:
- تقبل
classList.add("a", "b")وclassList.remove("a", "b")عدة فئات دفعة واحدة وتتجاهل الفئة المكررة تلقائياً. - يقبل المعامل المنطقي الثاني في
classList.toggle("open", isOpen)فرض الإضافة عندtrueوالحذف عندfalseفي سطر واحد يغنيك عن جملif/else! - تبدّل
classList.replace("pending", "verified")فئة قديمة بأخرى جديدة ذرياً وترجع قيمة منطقية تؤكد نجاح التبديل.
const pill = document.getElementById('pill');
let isDark = false;
document.getElementById('toggleBtn').addEventListener('click', () => {
isDark = !isDark;
pill.classList.toggle('dark-pill', isDark);
pill.classList.replace(isDark ? 'idle' : 'live', isDark ? 'live' : 'idle');
});اعتمد هذه القاعدة الهندسية الواضحة عند الاختيار بين الخاصيتين في مشاريعك:
| وجه المقارنة | element.className | element.classList |
|---|---|---|
| نوع القيمة في HTML | سلسلة نصية مفصولة بمسافات | كائن DOMTokenList يمنع التكرار |
| نوع القيمة في SVG | كائن SVGAnimatedString مختلف | نفس DOMTokenList الموحد تماماً |
| تحديث حالة تفاعلية مفردة | خطر (يمسح الفئات المجاورة) | آمن ودقيق عبر add وtoggle وreplace |
| أفضل موضع للاستخدام | التهيئة الأولية لعنصر منشأ للتو بـ createElement | كافة التحديثات التفاعلية والسمات والتحقق من الحقول |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس إدارة الفئات بين className وclassList: مخاطر استبدال النص الكامل واختلاف عناصر SVG، ودوال التحكم الذري عبر add وtoggle المشروطة وreplace، ومعيار الاختيار العملي بينهما. الخطوة التالية: انتقل إلى درس خصائص الأبعاد الداخلية client لقياس المساحة الداخلية وسماكة الإطار بدقة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 element.className خاصية نص الفئات className
- خاصية تمثل كامل نص سمة الفئات مفصولاً بمسافات على عناصر HTML.
- للمراجعة
- 02 DOMTokenList (classList) قائمة الرموز الذرية DOMTokenList
- كائن ذكي في خاصية classList يتيح إضافة وحذف وتبديل واستبدال الفئات دون تكرار أو مسح بالخطأ.
- للمراجعة
- 03 Two-Argument classList.toggle التبديل المشروط بمعامل ثانٍ
- تمرير قيمة منطقية ثانية لدالة toggle لضمان الإضافة عند التحقق والحذف عند عدمه.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- طبقة التنسيق البصري التي تفصلها فئات classList بنظافة عن الشيفرة البرمجية.
- للمراجعة
- 02 SVG SVG
- Scalable Vector Graphics
- عناصر الرسوم المتجهة التي تعمل معها classList بتوافق تام بخلاف اختلاف نوع className.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
استبدل إسناد className باستدعاء bad.classList.add("highlight") في المحرر الأول لكي تحتفظ البطاقة الأولى بإطارها الأزرق.
-
انقر زر Toggle State مرتين في المحرر الثاني ولاحظ تبديل الوضع الداكن واستبدال الفئة idle بالفئة live بسلاسة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.