スキルアップを始める!

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

JavaScript(ジャバスクリプト)
この記事は約1分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

querySelectorメソッド

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

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

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

querySelectorAll

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

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

まとめ

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

URLをコピーしました!