تبديل الفئة classList replace | إدارة الفئات عبر classList في JavaScript

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

بدلاً من استدعاء الحذف ثم الإضافة في سطرين منفصلين، تنجز el.classList.replace("status-draft", "status-published") التبديل في خطوة واحدة نظيفة وترجع true إذا عثرت على الفئة القديمة واستبدلتها.

الصف 2 كود برمجي

JavaScript

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';
  }
}

جرّب بنفسك

الصف 3 ملاحظة هامة

الصف 4 ملاحظة هامة

الصف 5 ملاحظة هامة

الصف 6 ملاحظة هامة

خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

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

أتقنت في هذا الدرس إدارة فئات التنسيق بنظافة عبر el.classList باستخدام دوال add وremove وtoggle المشروطة والفحص عبر contains والتبديل الذري عبر replace. الخطوة التالية: اختتم الفصل التاسع بدرس «مجموعات العناصر DOM Collections في JavaScript» لاستكشاف مجموعات المستند الجاهزة وتحويلها عبر Array.from().

Replacing Classes classList replace تبديل الفئة classList replace

شرح صفوف ومحتوى الفقرة

ملخص الدرس

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

جميع فقرات هذا الدرس (إدارة الفئات عبر classList في JavaScript)