كيفية تغيير صنف عنصر في JavaScript: أفضل الممارسات لعام 2025

كيفية تغيير صنف عنصر في JavaScript: من المبتدئ إلى المحترف في عام 2025

هل تساءلت يومًا كيف تجعل زرًا في موقع يغير لونه عند النقر، أو قائمة تظهر بسلاسة؟ كل هذا هو سحر تغيير الأصناف. السؤال «How can I change an element's class with JavaScript?» هو واحد من أكثر الأسئلة شيوعًا على Stack Overflow (عشرات الآلاف من المشاهدات). وليس من دون سبب: بدون هذه المهارة يصعب تخيل تطوير الويب الحديث.

في عام 2025، أصبحت المتصفحات أكثر ذكاءً، لكن الأداة الأساسية بقيت كما هي — classList. في هذه المقالة، سنستعرض جميع طرق تغيير صنف عنصر في JavaScript: من الطرق الكلاسيكية إلى التقنيات الحديثة. ستتعلم كيف تتجنب الأخطاء وتكتب كودًا لا تخجل من عرضه في المقابلات.

لماذا تغيير الصنف مهم؟

تخيل أنك تبني منزلًا من المكعبات. كل مكعب هو عنصر HTML، والأصناف هي ملصقات تقول: «أنا أحمر»، «أنا متحرك»، «أنا مخفي». عندما يضغط المستخدم على زر، تقوم ببساطة بتغيير الملصق — ويصبح العنصر حيًا. بدون تغيير الأصناف، كان عليك إعادة رسم الواجهة بأكملها، وهذا بطيء ومحبط.

في عام 2025، تغيير صنف عنصر في JavaScript هو عملية أساسية تُستخدم في 9 من أصل 10 مواقع تفاعلية. من النوافذ المنبثقة إلى الوضع الداكن — كل شيء يعتمد على الأصناف.

JavaScript الخالص: classList — أداتك الرئيسية

إذا كنت لا تزال تستخدم className وربط السلاسل النصية — توقف. في عام 2025، يوجد classList. إنها واجهة برمجة تطبيقات مدمجة تعمل في جميع المتصفحات الحديثة (حتى في Safari).

إليك كيف تبدو:

// الحصول على العنصرconst button = document.querySelector('.my-button');

// إضافة صنفbutton.classList.add('active');

// إزالة صنفbutton.classList.remove('active');

// تبديل صنفbutton.classList.toggle('active');

// التحقق من وجود صنفif (button.classList.contains('active')) {  console.log('الزر نشط!');}

هذا الكود هو الأساس الذي يجب أن يعرفه الجميع. ولكن هناك تفاصيل دقيقة تحول الكود الجيد إلى كود ممتاز.

أصناف متعددة: إضافة وإزالة دفعة واحدة

هل تريد إضافة عدة أصناف في وقت واحد؟ بسهولة:

element.classList.add('visible', 'animated', 'highlight');

نفس الشيء مع الإزالة:

element.classList.remove('hidden', 'fade-out');

هذا يعمل حتى في Internet Explorer 11 (إذا كنت تدعم القدامى). في عام 2025، هذا هو المعيار.

استبدال الصنف: استبدال صنف بآخر

أحيانًا تحتاج إلى استبدال صنف بآخر. على سبيل المثال، تبديل أيقونة من «شمس» إلى «قمر». لهذا توجد طريقة replace:

element.classList.replace('icon-sun', 'icon-moon');

إذا لم يكن الصنف icon-sun موجودًا — لن يحدث شيء، ولن يكون هناك خطأ. هذا آمن وقابل للقراءة.

التبديل الشرطي: toggle مع علامة منطقية

طريقة toggle يمكنها قبول وسيط ثانٍ — قيمة منطقية. إذا كانت true — سيتم إضافة الصنف، إذا كانت false — سيتم إزالته. هذا مفيد عندما تريد مزامنة الصنف مع حالة:

const isDarkMode = true;element.classList.toggle('dark', isDarkMode); // سيضيف 'dark'

const isLoggedIn = false;element.classList.toggle('logged-in', isLoggedIn); // سيزيل 'logged-in'

هذا أنظف بكثير من كتابة if-else.

وماذا عن className؟ متى نحتاجه؟

القديم الجيد className لا يزال حيًا، لكن وقته قد مضى. هو يستبدل جميع الأصناف دفعة واحدة:

element.className = 'new-class another-class';

المشكلة: إذا كان العنصر يحتوي بالفعل على أصناف، فسيتم مسحها. في عام 2025، يُستخدم className فقط في حالتين:

• عند الحاجة إلى استبدال كامل