DOM要素の取得には getElement系（getElementById、getElementsByTagName等）を使用することが多いと思いますが、今回はさらに簡単に要素を取得できる querySelector/querySelectorAll の使い方をメモ。
INDEX
querySelector と querySelectorAll の使い方
概要
関数名・引数・戻り値は以下となります。
| 関数名 | 引数 | 戻り値 |
|---|---|---|
| querySelector | DOM String | Element |
| querySelectorAll | DOM String | Node List |
querySelector
DOMで指定した要素を１つ取得します。
サンプルコードを実行すると、div要素内をクリックでクラス名をアラート表示します。
- サンプルコード
- [code]
クリックでこのdivのクラス名をアラート表示
[/code] - 結果
-
クリックでこのdivのクラス名をアラート表示
querySelectorAll
querySelector は一つの要素しか取得できませんが、Allがつくと全ての要素を配列で取得してくれます。
サンプルコードを実行すると、リスト要素内をクリックで内部要素をアラート表示します。
- サンプルコード
- [code]
- menu1
- menu2
- menu3
[/code] - 結果
-
- menu1
- menu2
- menu3
まとめ
querySelectorAll は一発で内部要素が配列化されるので、様々な場面で活躍しそうですね。どんどん使っていきましょう。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
