【JavaScript】querySelectorメソッドによるHTML要素の取得方法
こんにちは！ニタマサ＝NewM(@NewM07x2)です。
今回はJavaScriptにて「querySelector」メソッドを用いたHTML要素の取得方法をご紹介します。
結論から言うと「getElementById()」や「getElemetnsByClassName()」メソッドと変わりないです。
ポイントとしては「querySelector」メソッドはjQueryのような要素の指定が可能といった点です。
また、「querySelector」メソッドはid,classの二つをまかなえるので、とても楽です。
書き方としてはこれから開設していきますので、ぜひご覧ください。
尚、本記事では
構文→コードの紹介→解説
のステップで進めていきます。
簡単にコピぺして実践できるようにしていますので、ぜひトライしてみてください！
では、やっていきましょう！
目次
環境準備
今回設定していく環境は以下の通りになっています。
- HTMLファイル作成
※今回はHTMLファイルの中にJSを書いていきます。
本来であれば、外部ファイルに書いていくことが好ましいです。
ファイルの作成
まずは以下のコードをコピって完成物を確認してみましょう。
コードは以下になります。
index.html
See the Pen KKVNwzx by NewM07x2 (@newm07x2) on CodePen.
解説
構文(querySelector)
document.querySelector( CSSセレクタ );
- CSSセレクタ：”#id”や”.class”が入ります。
詳細解説
構文を見ていきましょう。
documentの部分は決まり文句のようなもので、画面全体を指定します。
そして、画面全体に対して、querySelector()を実行することになります。
引数にはjQueryで使用するCSSセレクタ(”#id”や”.class”)を指定することで、HTML要素を取得することが可能になります。
ここで注意点があります。それは
最初に合致したHTML要素を取得した時点でプログラムは終了する
という点です。
例えば、classの場合は複数要素に付与することができます。
なので、指定したclassで複数の要素を取得したいと思っても、無理となってしまいます。
下記、例を見ていきましょう。
See the Pen KKVNwzx by NewM07x2 (@newm07x2) on CodePen.
ここでは「querySelector()」メソッドを用いてクラス＝”class”のliタグ内の値を取得仕様としていますが、実際に取れているのはAの値のみとなります。
Cまでの値を全て取得したい場合は、「querySelector()」メソッドの類似した「querySelectorAll()」メソッドを使用していくことになります。
こちらも併せて解説していきます。
では以下のコードをコピって先ほど作成したファイル内のコードの下に張り付けて確認していきましょう。
コードは以下になります。
See the Pen KKVNwzx by NewM07x2 (@newm07x2) on CodePen.
構文(querySelectorAll)
document.querySelectorAll( CSSセレクタ );
- CSSセレクタ：”#id”や”.class”が入ります。
詳細解説
CSSセレクタの部分はquerySelectorメソッドを変わりないです。
異なる点は当たり前ですが、取得した内容が１つではないことです。
つまり、取得した内容を表示したり、書き換えたりしたい場合はループ処理をする必要があります。
とはいえ、簡単なことで、forEach文を利用していきます。
コードは以下の感じです。
test_class.forEach(function (value) {
document.write(value.innerHTML);
});test_class は先ほど、querySelectorAllメソッドで取得したエレメントが入っています。
複数入っているので、これをforEachしていきます。
function 以下の処理を見ていきましょう。
まず「value」ですが、この中にはtest_classと同じ値が格納されています。
※forEach用にデータを加工したイメージです。
あとは value の中身を見ている処理になります。
これで完了です。
まとめ
いかがだったでしょうか。
今回はquerySelectorメソッド及びquerySelectorAllメソッドによるHTML要素の取得方法をご紹介してきました。
ポイントを再度あげると、以下のようになります。
- querySelector()はCSSクラスタのように指定可能
- querySelector()は最初に合致した要素だけ取得
- querySelectorAll()は合致した要素をすべて取得。
※foreachで展開必須
こちらは覚えておくととても便利なので、ぜひ試してみてください！
もし、この記事に関して分からない事や質問がある場合は、お問い合わせページまたはTwitterのDMまで連絡を頂ければと思います！！！
（ついでにフォローしていただけると最高に嬉しいです笑）
では！See you again!(´∀｀)
