.net column
.NET開発者のためのブログメディア

JavaScriptでのquerySelectorAllの使い方とは?セレクタの条件に一致する要素をすべて取得する方法を紹介

 
JavaScriptでのquerySelectorAllの使い方とは?セレクタの条件に一致する要素をすべて取得する方法を紹介
基本情報技術者試験の試験対策はこちら>>
SE
JavaScriptでのquerySelectorAllの使い方について教えてください。
PM
JavaScriptでquerySelectorAllの使ったセレクタの条件に一致する要素をすべて取得する方法についてご紹介しましょう。

JavaScriptでのquerySelectorAllの使い方とは?


今回は、JavaScriptでのquerySelectorAllの使い方について説明します。
querySelectorAllを使うと、セレクタの条件に一致する要素をすべて取得できます。

JavaScriptでのquerySelectorAllの使い方に興味のある方はぜひご覧ください。

タグ名指定

タグ名指定で要素を取得する方法を紹介します。「querySelectorAll(‘タグ名’)」のように記述します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。分かりやすくするために、条件に一致した要素に色を付けています。

実行結果は以下のようになります。

See the Pen
querySelectorAll1
by kskumd (@kskumd)
on CodePen.

class指定

class指定で要素を取得する方法を紹介します。「querySelectorAll(‘.class名’)」のように記述します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
querySelectorAll2
by kskumd (@kskumd)
on CodePen.

id指定

id指定で要素を取得する方法を紹介します。「querySelectorAll(‘#id名’)」のように記述します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
querySelectorAll3
by kskumd (@kskumd)
on CodePen.

or指定

セレクタを複数指定し、いずれかに一致する要素を取得する方法を紹介します。「querySelectorAll(‘セレクタ1,セレクタ2’)」のように、カンマ区切りで記述します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
querySelectorAll4
by kskumd (@kskumd)
on CodePen.

タグ名配下のclass指定

タグ名配下のclass指定に一致する要素を取得する方法を紹介します。「querySelectorAll(‘タグ名.クラス名’)」のように記述します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
querySelectorAll5
by kskumd (@kskumd)
on CodePen.


SE
JavaScriptでのquerySelectorAllの使い方について,よく分かりました。
PM
JavaScriptでのquerySelectorAllを使うと、セレクタの条件に一致する要素をすべて取得できます。条件を複数組み合わせて、柔軟にセレクタ指定が可能ですので参考にしてください。

まとめ

いかがでしたでしょうか。JavaScriptでのquerySelectorAllの使い方について説明しました。
querySelectorAllを使うと、セレクタの条件に一致する要素をすべて取得できます。条件を複数組み合わせることもできますので、柔軟にセレクタ指定が可能です。

ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags