【JavaScript】関数・メソッドとは？3種類の定義方法を知ろう
takahide
初心者がITを楽しむブログ
【JavaScript】HTMLの要素を取得する方法（getElement,querySelector,querySelectorAll）
takahide
おはようございます。タカヒデです。
本日は、「JavaScriptにおける、『HTMLの要素の取得方法』について、『getElementメソッド』『querySelectorメソッド』『querySelectorAllメソッド』」を紹介します。
こんな人にオススメ
- JavaScriptにおける『HTMLの要素の取得方法』が理解できない
- 『getElementメソッド』『querySelectorメソッド』『querySelectorAllメソッド』の使い方を知りたい
ぜひ本記事を参考にしてください。
Contents
HTMLの要素を取得（方法①：getElement）
HTMLの要素を取得するには『getElementメソッド』を使用します。
まずは指定された『id値』を取得する『getElementById』メソッドです。
//記載方法
document.getElementById(取得する要素のid)以下が記載例です。
<p id="text">これはテストページです</p>let testText = document.getElementById("text");
console.log(testText);
//実行結果：<p id="text">これはテストページです</p>
console.log(testText.textContent);
//実行結果：これはテストページです変数『testText』を宣言し、『getElementById』によって取得した、『text』idを格納しています。
『console.log』で確認すると、『text』idの要素を確認することができます。
今紹介した『getElementById』以外にも『getElementメソッド』はいくつかあるため記載します。
■getElementメソッド一覧
| メソッド | 取得する要素 |
|---|---|
| getElementById | id属性 |
| getElementsByClassName | class属性 |
| getElementsByName | name属性 |
| getElementsByTagName | タグ（p,h1 等） |
| getElementsByTagNameNS | タグと名前空間 |
HTMLの要素を取得（方法②：querySelector）
続けて、HTMLの要素を取得する方法の2つ目として『querySelectorメソッド』を使用します。
『getElementメソッド』より、複雑な条件で要素を取り出すことができ、最初の1つの要素を取得します。
今回は指定された『class値』を取得します。
//記載方法
document.querySelector(取得する要素のセレクター式)以下が記載例です。
<p class="sample">1つ目のsampleクラスです</p>
<p class="sample">2つ目のsampleクラスです</p>let testText = document.querySelector(".sample");
console.log(testText);
//実行結果：<p class="sample">1つ目のsampleクラスです</p>
console.log(testText.textContent);
//実行結果：1つ目のsampleクラスです1つ目のsampleクラスのみ取得できていることが分かります。
ここで、記載方法にある、「取得する要素のセレクター式」という言葉についても解説しておきましょう。
セレクター式とは？
セレクター式とは、CSSで利用されていた記法であり、スタイルを適用する対象を特定するための仕組みです。
id値以外にもclass値やタグの要素を取得することができます。
■セレクター式の基本記法
| 項目 | 構文 | 記載例 |
|---|---|---|
| すべての要素 | * | document.querySelector(‘*’) |
| id属性の値 | #idの値 | document.querySelector(‘#text’) |
| classの要素 | .classの値 | document.querySelector(‘.text’) |
| タグの要素 | タグ名 | document.querySelector(‘p’) |
HTMLの要素を取得（方法③：querySelectorAll）
HTMLの要素を取得する方法の3つ目として『querySelectorAllメソッド』を使用します。
『querySelectorメソッド』と似ていますが、最初の一つではなく、すべての要素を取得します。
今回は、指定された『class値』を取得します。
//記載方法
document.querySelectorAll(取得する要素のセレクター式)以下が記載例です。
<p class="sample">1つ目のsampleクラスです</p>
<p class="sample">2つ目のsampleクラスです</p>let testText = document.querySelectorAll(".sample");
console.log(testText);
//実行結果：NodeList(2) [p.sample, p.sample]すべての『sample』クラスの要素を確認することができます。
まとめ
以上が「JavaScriptにおける『HTMLの要素の取得方法』について、『getElementメソッド』『querySelectorメソッド』『querySelectorAllメソッド』」でした。
まとめ
- HTMLの要素を取得するには、『getElementメソッド』『querySelectorメソッド』『querySelectorAllメソッド』を使用
- 『querySelectorメソッド』『querySelectorAllメソッド』は複雑な条件で要素の取り出しが可能
- 最初の1つ目の要素を取り出す場合は『querySelectorメソッド』、すべての要素を取り出す場合は『querySelectorAllメソッド』
この記事が誰かの参考になれば幸いです。
お疲れさまでした。
ABOUT ME
通信会社の企画職で働く30代
非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中
IT初心者が楽しいと思えるように発信することを目指しています
↓Xもやっているのでフォローしてね
