TypeScript:3.classListとCSSセレクタ

classListとは

・HTMLElementが持っている「クラスの一覧（リスト）」を表すプロパティ
・クラスを追加、削除、切り替え、チェックするためなどのメソッドが用意されている

exe.ts

<div class="food hidden active"></div>

上記は"food hidden active"という３つのクラスがあるが
JavaScriptやTypeScriptではこれを classList を使ってリストして扱う事ができる

よく使うclassListのメソッド一覧

・add() クラスを追加 element.classList.add('active')
・remove() クラスを削除 element.classList.remove('active')
・toggle() クラスをON/OFF切り替え element.classList.toggle('active')
・contains() 指定のクラスを持ってるかチェック　　　　
element.classList.contains('active') → true/false

具体例

exe.ts

const div = document.querySelector('.food') as HTMLDivElement;

//クラスを追加
div.classList.add('active'); // class="food active"

//クラスを削除
div.classList.remove('food'); // class= "active"

//クラスが含まれてる確認
if (div.classList.contains('active')){
    console.log('アクティブ状態です');
}

// クラスをON/OFF切り替え（トグル）
div.classList.toggle('hidden');// class="active hidden" または class="activr"

まとめ：classListとは？

何を表す？　
　HTML要素のclass属性を「リスト」として扱うもの

何ができる？
　クラスの追加・削除・切り替え・確認

どんな時に使う？
　見た目を切り替える、アニメーション、状態管理などに便利

疑問：なぜ classList.add('food--active') の引数は .food--active（ドット付き）じゃなくていいの？

結論：classList.add()に渡すのは「クラス名」そのものだからドット「.」は不要である

比較して理解しよう
・CSSのセレクタ　.food--active{...}
ドットはクラスを意味しておりCSSクラスタクラス以外も指定する場合があるためクラスを指定する場合クラスを意味するドットを付与しなければならない。

・JavaScriptのclassList classList.add('food--active')
ドットなしでクラス名のそのものを指定
classListはクラスを操作するためのものすなわちクラスを指定する前提のプロパティのためクラス名だけでよい。

例

exe.ts

this.foods = document.querySelectorAll<HTMLDivElement>('.food');

上記はCSSセレクタの文法を使って、HTMLの要素を検索している。
そのためクラスを指定する場合はクラスを意味する「.」が必要

セレクタの書き方
・.food class="food" の要素を探す
・#main id="main" の要素を探す
・div 全てのdiv要素を探す
・ul > li ulの直下のli要素を探す

まとめ

シーン 目的 書き方 ドット必要？ 理由
querySelectorAll() 要素を検索（セレクタ指定） .food ✅ 要る CSSセレクタのルールだから
classList.add() クラス名を追加 'food' ❌ 要らない 単なる名前（文字列）だから

シーン	目的	書き方	ドット必要	理由
querySelectorAll()	要素を検索(セレクタ指定)	.food	要る	CSSセレクタのルールだから
classList.add()	クラス名を追加	'food'	要らない	クラス名を指定するものだから