JavaScriptでのquerySelectorAllの使い方とは？セレクタの条件に一致する要素をすべて取得する方法を紹介
- SE
- JavaScriptでのquerySelectorAllの使い方について教えてください。
- PM
- 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.
- SE
- JavaScriptでのquerySelectorAllの使い方について，よく分かりました。
- PM
- JavaScriptでのquerySelectorAllを使うと、セレクタの条件に一致する要素をすべて取得できます。条件を複数組み合わせて、柔軟にセレクタ指定が可能ですので参考にしてください。
まとめ
いかがでしたでしょうか。JavaScriptでのquerySelectorAllの使い方について説明しました。
querySelectorAllを使うと、セレクタの条件に一致する要素をすべて取得できます。条件を複数組み合わせることもできますので、柔軟にセレクタ指定が可能です。
ぜひご自身でソースコードを書いて、理解を深めてください。
