CODE
JavaScript
jQuery

【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メソッドを変わりないです。

異なる点は当たり前ですが、取得した内容が1つではないことです。

つまり、取得した内容を表示したり、書き換えたりしたい場合はループ処理をする必要があります。

とはいえ、簡単なことで、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!(´∀`)