URLをコピーしました!
スキルアップを始める!

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

JavaScript(ジャバスクリプト)
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

querySelectorメソッド

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

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

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

querySelectorAll

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

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

まとめ

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

Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら