جافا سكريبت / استفسار بخصوص classList و toggle

لا أظن انه يوجد هنالك قاعدة معينة ثابتة فلكل منها استعمالاته وسياقاتها التي يخدمها.

• يكون استخدام toggle عمليا عندما نحتاج ازالة واضافة صنف ما مع الاعتبار لامتلاك العنصر للصنف من عدمه. فان كنا مثلا نخصص زرا للتبديل بين سمات الموقع : داكن وعادي. بحيث يتحكم في ذلك امتلاك العنصر body للصنف dark. سيمكن اسناد الوظيفة التي تقوم بعمل toggle للصنف الى حدث الضغط على زر التبديل بين الوضعين.
• يكون استخدام remove/add عمليا عندما نحتاج ازالة واضافة صنف ما دون الاعتبار لامتلاك العنصر للصنف من عدمه. أي ان التركيز هنا لا يكون على العنصر نفسه، وانما على حدث خارجي تماما. مثال: يوجد زر "الاشتراك في القائمة البريدية" في ترويسة الموقع، بحيث يقوم هذا الزر عند الضغط عليه باظهار نافذة منسدلة تحمل استمارة للاشتراك. تظهر ايضا زرا اغلاق يمكن من عليه اخفاء النموذج مجددا. التركيز الآن هو على دلالة الحدث الخارجي قبل العنصر نفسه. فعندما نضغط على زر الاظهار سيتم اعطاء الصنف "visible" لهذا العنصر. ثم عند الاخفاء سيتم ازالة الصنف "visible".
• add/remove تقبلان اكثر من معامل. بمعنى انه يمكن عن طريقهما التعامل مع اكثر من صنف وليس واحد فقط. 

  h1.classList.add('green','black' ,'blue')

  أما toggle فلا، يمكنها التعامل مع صنف واحد فقط.

  h1.classList.toggle('red')

   

بالمختصر، اذا كانت امتلاك الصنف للعنصر مهما في العملية فإن استعمال toggle سيكون أولى. وإلا فإنه سيمكن استعمال add/remove لاضافة وازالة عدد معين من الاصناف

.