JavaScriptでのquerySelectorAllの使い方とは？セレクタの条件に一致する要素をすべて取得する方法を紹介
- システム
エンジニア - JavaScriptでのquerySelectorAllの使い方について教えてください。
- プロジェクト
マネージャー - JavaScriptでquerySelectorAllの使ったセレクタの条件に一致する要素をすべて取得する方法についてご紹介しましょう。
JavaScriptでのquerySelectorAllの使い方とは？
今回は、JavaScriptでのquerySelectorAllの使い方について説明します。
querySelectorAllを使うと、セレクタの条件に一致する要素をすべて取得できます。
JavaScriptでのquerySelectorAllの使い方に興味のある方はぜひご覧ください。
タグ名指定
タグ名指定で要素を取得する方法を紹介します。「querySelectorAll(‘タグ名’)」のように記述します。HTMLは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<h3>title1</h3>
<h3>title2</h3>
<h3>title3</h3>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<p>text1</p>
<p>text2</p>
<p>text3</p>
|
JavaScriptは以下のように記述します。分かりやすくするために、条件に一致した要素に色を付けています。
|
1
2
3
4
5
6
7
8
|
// li要素の取得
let elements = document.querySelectorAll('li');
// 要素の繰り返し処理
for (var i = 0; i < elements.length; i++) {
// 対象要素を赤色にする
elements[i].style.color = "red";
}
|
実行結果は以下のようになります。
See the Pen
querySelectorAll1 by kskumd (@kskumd)
on CodePen.
class指定
class指定で要素を取得する方法を紹介します。「querySelectorAll(‘.class名’)」のように記述します。HTMLは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<h3 class="myclass">title1</h3>
<h3>title2</h3>
<h3>title3</h3>
<ul>
<li>item1</li>
<li class="myclass">item2</li>
<li>item3</li>
</ul>
<p>text1</p>
<p>text2</p>
<p class="myclass">text3</p>
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
|
// class指定の取得
let elements = document.querySelectorAll('.myclass');
// 要素の繰り返し処理
for (var i = 0; i < elements.length; i++) {
// 対象要素を赤色にする
elements[i].style.color = "red";
}
|
実行結果は以下のようになります。
See the Pen
querySelectorAll2 by kskumd (@kskumd)
on CodePen.
id指定
id指定で要素を取得する方法を紹介します。「querySelectorAll(‘#id名’)」のように記述します。HTMLは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<h3 id="myid">title1</h3>
<h3>title2</h3>
<h3>title3</h3>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<p>text1</p>
<p>text2</p>
<p>text3</p>
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
|
// id指定の取得
let elements = document.querySelectorAll('#myid');
// 要素の繰り返し処理
for (var i = 0; i < elements.length; i++) {
// 対象要素を赤色にする
elements[i].style.color = "red";
}
|
実行結果は以下のようになります。
See the Pen
querySelectorAll3 by kskumd (@kskumd)
on CodePen.
or指定
セレクタを複数指定し、いずれかに一致する要素を取得する方法を紹介します。「querySelectorAll(‘セレクタ1,セレクタ2’)」のように、カンマ区切りで記述します。HTMLは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<h3>title1</h3>
<h3>title2</h3>
<h3>title3</h3>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<p class="myclass">text1</p>
<p>text2</p>
<p>text3</p>
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
|
// li要素またはmyclassの取得
let elements = document.querySelectorAll('li,.myclass');
// 要素の繰り返し処理
for (var i = 0; i < elements.length; i++) {
// 対象要素を赤色にする
elements[i].style.color = "red";
}
|
実行結果は以下のようになります。
See the Pen
querySelectorAll4 by kskumd (@kskumd)
on CodePen.
タグ名配下のclass指定
タグ名配下のclass指定に一致する要素を取得する方法を紹介します。「querySelectorAll(‘タグ名.クラス名’)」のように記述します。HTMLは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<h3 class="myclass">title1</h3>
<h3>title2</h3>
<h3>title3</h3>
<ul>
<li>item1</li>
<li class="myclass">item2</li>
<li class="myclass myclass2">item3</li>
</ul>
<p>text1</p>
<p>text2</p>
<p class="myclass">text3</p>
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
|
// liのmyclassを取得
let elements = document.querySelectorAll('li.myclass');
// 要素の繰り返し処理
for (var i = 0; i < elements.length; i++) {
// 対象要素を赤色にする
elements[i].style.color = "red";
}
|
実行結果は以下のようになります。
See the Pen
querySelectorAll5 by kskumd (@kskumd)
on CodePen.
- システム
エンジニア - JavaScriptでのquerySelectorAllの使い方について，よく分かりました。
- プロジェクト
マネージャー - JavaScriptでのquerySelectorAllを使うと、セレクタの条件に一致する要素をすべて取得できます。条件を複数組み合わせて、柔軟にセレクタ指定が可能ですので参考にしてください。
まとめ
いかがでしたでしょうか。JavaScriptでのquerySelectorAllの使い方について説明しました。
querySelectorAllを使うと、セレクタの条件に一致する要素をすべて取得できます。条件を複数組み合わせることもできますので、柔軟にセレクタ指定が可能です。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
jQueryでのcheckboxのcheckedの扱い方を紹介！checkedを使いこなそう
jQueryでのcheckboxのチェック状態（checked）の扱い方について 今回は、jQueryでのcheckboxのチェック状態（checked）の扱い方について説明します。 ここでは、checkboxの ・設定 […]
-
JavaScriptのスクリプトエラーの種類とその対策｜エラーハンドリング
JavaScriptのスクリプトエラーの種類とその対策を紹介します！ 今回は、JavaScriptのスクリプトエラー（ReferenceError／RangeError／SyntaxError／TypeError）の種類 […]
-
JavaScriptのconsole.logとは？console.logの使い方を基本から解説します！
console.logとは？ console.logはJavaScriptのコマンドです。その名前の通りにコンソールにログを出力する機能があります。デバッグをする上で必須の機能と言えるでしょう。使い方はscriptタグ内 […]
-
JavaScriptでのparseIntの使い方とは？基本的な使い方から小数や予約語に対して使う方法について紹介
JavaScriptでのparseIntの使い方とは？ 今回は、JavaScriptでのparseIntの使い方について説明します。parseIntを使うことで、引数を整数に変換できます。parseIntを小数や予約語に […]
-
LaravelでVue.jsを利用する方法を解説｜LaravelにおけるVue.jsのセットアップの仕方や使い方
【初心者向け】LaravelでVue.jsを利用する方法を解説 現在のWebアプリでは、サーバーサイドだけでなく、フロントエンドでのフレームワーク利用もまた、当たり前に行われる様になりました。こうしたフロントエンドフレー […]
