こんにちは、ライターのマサトです！
今回は、まるでjQueryのようにHTML要素を簡単に検出して取得できる「querySelector()」メソッドについて学習をしていきましょう！
この記事では、
- 「querySelector()」とは？
- 「querySelector()」の使い方
- 「querySelectorAll()」の基本
などの基本的な内容から、応用的な使い方に関しても解説していきます。
この記事で、「querySelector()」をしっかり学習して自分のスキルアップを目指しましょう！
なお、休日やふと空いたすきま時間に収入が増やせるスキルを身につけたい人は、ぜひ「侍エンジニア」をお試しください。
侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポート。月5~10万円の収入獲得を見据え、スキルの習得から仕事の取り方・進め方まで一貫して学べます。
受講料が最大80%OFFになる「給付金コース」も提供中。未経験から副業で収入を増やしたい人は、ぜひ一度お試しください。
「querySelector()」とは？
まずは、「querySelector()」について基本的な知識から身につけていきましょう！
「querySelector()」は、JavaScriptから任意のHTML要素を検出・取得することができるメソッドになります。
JavaScriptには以前から「getElementById()」とか「getElemetnsByClassName()」などHTML要素を取得できるメソッドはありました。
しかし、「querySelector()」を使うとid属性値・class属性値などを意識せずにjQuery感覚でHTML要素をセレクタ指定することができます。
つまり、簡単に言うと「querySelector()」だけであらゆるHTML要素を取得することができるわけです。
ちなみにですが、セレクタの意味や概念・使い方などを次の記事で基本から応用まで解説しているのでぜひ参考にしてみてください！
「querySelector()」の使い方
この章では、「querySelector()」の基本的な使い方を見ていきましょう！
主に、一般的な構文から実際のプログラミング手法について学んでいきます。
基本的な構文と書き方について
まずは、もっとも基本となる構文から見ていきましょう！
一般的には、対象となる範囲にquerySelector()を実行することになります。
document.querySelector( CSSセレクタ )
この場合、document全体に対してquerySelector()を実行することになります。引数にはjQueryで使うようなCSSセレクタを指定することで、任意のHTML要素を取得することができるようになります。
注意点としては、最初に合致したHTML要素を取得した時点でプログラムは終了するという点です。
つまり、複数の要素を取得するには自作のループ処理を作成するか、後述する「querySelectorAll()」を使う必要があります。
ID・Class属性でHTML要素を取得する基本
今度は、実際のプログラミング手法を見ていきましょう！
例えば、次のようなHTMLがあるとします。
サンプルタイトル１
サンプルテキスト１
この例では、id・class属性が付与されたHTML要素である点に注目してください。
このようなHTML要素を取得するには次のように記述します！
const elem1 = document.querySelector('.sample');
const elem2 = document.querySelector('#test');
console.log(elem1);
console.log(elem2);
実行結果
サンプルタイトル１
サンプルテキスト１
querySelector()の引数に、それぞれCSSセレクタを指定しているのが分かります。これにより、同じquerySelector()でも引数の指定方法によって任意のHTML要素を取得できるというわけです。
実行結果を見るとしっかりと要素が取得できているのが分かりますね。
「querySelectorAll()」の基本
この章では、複数のHTML要素を取得できる「querySelectorAll()」について見ていきましょう！
主に、一般的な構文から実際のプログラミング手法について学んでいきます。
基本的な構文と書き方について
まずは、もっとも基本となる構文から見ていきましょう！
と、言っても実は前章で学んだ「querySelector()」とほとんど同じ感覚で利用することができます。
document.querySelectorAll( CSSセレクタ )
このように、引数の指定方法や対象の範囲などquerySelector()と手法は同じです。
大きく違うところは合致するHTML要素をすべて取得することができるという点です！
queryselector()は最初に合致した要素だけしか取得できないので、用途に応じて使い分けられるようにしましょう。
複数のHTML要素を取得する方法
それでは、実際のプログラミング手法を見ていきましょう！
まずは、次のようなHTML要素を想定してください。
-
- サンプル１
-
- サンプル２
-
- サンプル３
この例では、複数のリスト要素が配置されています。
このリスト要素をすべて取得するには次のように記述します！
const elem = document.querySelectorAll('.list');
console.log(elem);
この例では、querySelectorAll()の引数にclass属性値「list」を指定しています。
これによりリスト要素をすべて指定することになり、結果的に全リスト項目を取得できるわけです。
もちろん指定方法は「li」要素をそのまま設定しても構いませんが、他のリスト要素との兼ね合いに注意しましょう。
forEach文で要素のテキストを取得する方法
さて、取得したすべてのリスト要素をそれぞれ1つずつ処理したい場合について見ていきましょう。
querySelectorAll()で取得した要素はNodeListと言って、配列によく似たデータ構造が格納されています。
そこで、配列を効率よく繰り返し処理できる「forEach」を使って各要素を1つずつ処理してみましょう。
先ほどの結果を元に、次のサンプル例を見てください！
const elem = document.querySelectorAll('.list');
elem.forEach(function(value) {
console.log(value);
})
実行結果
- サンプル１
- サンプル２
- サンプル３
この例では、querySelectorAll()を使って取得した結果をforEach文で繰り返し処理しています。
引数「value」を指定することで、それぞれのHTML要素を実行結果のように取得することができるわけです。
これにより、querySelectorAll()を使って取得したHTML要素に対して、任意の処理を実行することができるので覚えておきましょう！
まとめ
今回は、セレクタ指定により任意のHTML要素を簡単に取得できる「querySelector()」について学習しました。
最後に、もう一度ポイントをおさらいしておきましょう！
- セレクタ指定によりquerySelector()だけでさまざまな属性のHTML要素を取得できる</b
- querySelector()は最初に合致した要素だけを取得する
- querySelectorAll()は合致した要素をすべて取得できる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
