JavaScriptで複数のクラスを追加する方法

1. 単一のクラスを追加する方法: HTML要素に単一のクラスを追加するには、classList.add()メソッドを使用します。以下はその例です。

   const element = document.getElementById('myElement');
   element.classList.add('className');

   上記の例では、idが'myElement'であるHTML要素に、'className'という単一のクラスが追加されます。

2. 複数のクラスを追加する方法: HTML要素に複数のクラスを追加するには、classList.add()メソッドを複数回呼び出すか、スプレッド演算子を使用します。以下はその例です。

   const element = document.getElementById('myElement');
   element.classList.add('class1', 'class2', 'class3');
   // スプレッド演算子を使用する場合
   const classesToAdd = ['class1', 'class2', 'class3'];
   element.classList.add(...classesToAdd);

   上記の例では、'class1'、'class2'、'class3'の3つのクラスがHTML要素に追加されます。

これらの方法を使用すると、JavaScriptを使ってHTML要素に複数のクラスを追加することができます。必要に応じて、他のDOM操作やイベント処理と組み合わせることもできます。