HTML属性classListの紹介：要素クラスの魔法使いになる

 classList

classListは、HTML5で新たに導入された属性で、DOM要素のDOMTokenListを返します。これは読み取り専用のリストで、要素のすべてのクラスを含んでいます。

さあ、試してみましょう！たとえば、次のようなdiv要素があるとします。「apple」、「pen」、「pineapple」という3つのクラスがあります。

<div id="testDiv" class=" apple pen pineapple">
  classList test
</div>

⬆️上記のように、3つのクラスが表示されていることがわかります。次に、これらのクラスを操作する方法について説明しましょう。

対応するメソッド

classList属性には、クラスリストを操作するためのいくつかの関数が用意されています。これには以下が含まれます：

• add: 新しいクラスを追加します。
• remove: クラスを削除します。
• replace: あるクラスを別のクラスに置き換えます。
• toggle: クラスをトグルします - 存在する場合は削除し、存在しない場合は追加します。

// 上記の例から続ける
tarDiv.classList.add('orange')   // 新しいクラス - orangeを追加
tarDiv.classList.remove('apple') // appleを削除
tarDiv.classList.replace('pen','pencil') // penをpencilに置き換える
tarDiv.classList.toggle('pineapple')     // 存在する場合は削除します

皆さんはこの手順に従って実行し、結果を想像してみることができます。

⬇ 結果をステップバイステップで出力し、期待通りかどうかを確認してください。

クラスが存在するかどうかを確認するための関数もあります：

• contains: 特定のクラスが存在するかどうかを示すブール値を返します。

tarDiv.classList.contains('apple')

複数のパラメーター - 複数のクラスの操作と強制

addとremoveの両方は、コンマで区切られた複数のクラス名を操作対象として受け入れることができます。

tarDiv.classList.add('orange', 'melon') 
tarDiv.classList.add('apple', 'pen') 

toggleも第二引数を受け入れます。forceはブール値です。

名前が示すように、forceがtrueに設定されている場合、クラスが存在しているかどうかに関係なく操作が強制されます。falseに設定されている場合、逆の方法で動作します - クラスは常に削除されます。

// クラスを強制的に追加する
tarDiv.classList.toggle('apple', true); // 存在していても、'apple'クラスを追加します

// クラスを強制的に削除する
tarDiv.classList.toggle('apple', false); // もはや存在しなくても、'apple'クラスを削除します 

結論

まとめると、HTML5のclassList属性は要素のクラスと対話する便利な方法を提供します。

クラスを簡単に操作し、ウェブページのスタイルや動作を動的に変更することができます。

✅もし説明に関する問題があれば、お気軽にお知らせください。

英文版の記事：Introduction to HTML Attribute classList: Becoming the Wizard of Element Classes - Zyrastory - Code & Food Research Center