كيفية تغيير class عنصر HTML باستخدام JavaScript؟

مرحبًا بالجميع! لقد بدأت للتو في تعلم JavaScript ولا أستطيع فهم كيفية تغيير الـ classes للعناصر في الصفحة. لدي هيكل HTML بسيط: ```html اضغط علي ``` أريد أنه عند النقر على الزر، يتغير class الـ div من "red" إلى "blue" (أي يتغير اللون من الأحمر إلى الأزرق). جربت كتابة شيء مثل `document.getElementById('myDiv').class = 'blue'` لكنه لا يعمل. في الـ console يظهر خطأ: "Uncaught TypeError: Cannot set properties of null". مع أن العنصر موجود بالتأكيد في الصفحة، لقد تأكدت. ثم وجدت أنه يجب استخدام `className`، لكن عندما أكتب `document.getElementById('myDiv').className = 'blue'`، يختفي class "box" من العنصر، وأنا أريد أن يبقى. أي أريد استبدال class واحد فقط، وليس الكل. أرشدوني، كيف أتعامل مع الـ classes بشكل صحيح في JavaScript؟ كيف أضيف class جديد دون حذف القديم؟ كيف أحذف class معين؟ وكيف