【JavaScript】特定のクラス名を指定して変数に格納する｜querySelector・querySelectorAll

JavaScript(ジャバスクリプト)

2023.06.19

この記事は約1分で読めます。

querySelectorメソッド

特定のクラス名を指定するには、documentオブジェクトのquerySelectorメソッドやquerySelectorAllメソッドに、ドット（.）を使ってクラス名を指定します。具体的には、以下のように記述します。

const ul = document.querySelector('.class-name ul');

この場合、class-nameというクラス名が設定されている要素の子孫要素であるul要素を取得することができます。

また、li要素も同様に取得することができます。

const liItems = document.querySelectorAll('.class-name li');

このように、セレクターにドットをつけてクラス名を指定することで、特定のクラス名の配下にある要素を取得することができます。