要素を取得する3つのJSメソッド 〜挙動の違いをまとめてみた〜

DOM操作の基本、要素の取得方法ですが、
getElementById、getElementsByClassName、querySelectorの3つが代表的なんじゃないでしょうか。
でもそれぞれ微妙に挙動が違うので、それを今回はまとめてみました。

取得できる内容の比較

それぞれ取得できる内容ですが、
以下のHTMLを取得してみようと思います。

<div id="title" class="title">緋色の研究</div>
<div class="title">恐怖の谷</div>

getElementById

<div id="title" class="title">緋色の研究</div>
<div class="title">恐怖の谷</div>

const title = document.getElementById('title');
console.log(title);
// 結果
"<div id='title' class='title'>緋色の研究</div>"

いわずもがなIDをもとに取得するので、
緋色の研究のHTML要素のみ出力されました。
idは1ページに1つしか定義できませんからね。

getElementsByClassName

<div id="title" class="title">緋色の研究</div>
<div class="title">恐怖の谷</div>

const title = document.getElementsByClassName('title');
console.log(title);
// 結果
"[object HTMLCollection]"

おっと、てっきりtitleのクラスを持つ2つのHTMLが出力されると思いきや、
まさかの[object HTMLCollection]。

そうなんです。
getElementsByClassNameはそのままでは正しく出力できません。

すべてを出力するためには以下のようにfor文で回して出力します。

const title = document.getElementsByClassName('title');
for ( let i = 0; i < title.length; i ++ ){
	console.log(title[i]);
}
// 結果
"<div id='title' class='title'>緋色の研究</div>"
"<div class='title'>恐怖の谷</div>"

補足ですが、getElementsByClassNameは、『Elements』と複数形になっていることに注意してくださいね。

querySelector

querySelectorは、クラスでもIDでも、要素そのものでも指定することができます。
結構万能。

IDはgetElementById同様1つしか出力されない（というか、1つしかもともとIDは定義できない）ので、
複数のクラスを定義した場合を見てみましょう。

ちなみにquerySelectorは先程言ったように、クラスもIDも指定できるので、
引数の指定は('title')ではなく、クラスの場合は('.title')、IDの場合は('#title')としましょう。

<div id="title" class="title">緋色の研究</div>
<div class="title">恐怖の谷</div>

const title = document.querySelector('.title');
console.log(title);
// 結果
"<div id='title' class='title'>緋色の研究</div>"

そうです。
querySelectorは1つ目の要素しか取得しません。
また、getElementsByClassNameのようにfor文で回すこともできません。
IDもクラスも指定できて便利なquerySelectorですが、
いいことばかりではないのです。

ちなみに、もしすべての要素を取得したいのなら、
querySelectorAllを使いましょう。

まとめ

基本的にgetElementByIdの使用頻度が高いと思いますが、
getElementsByClassNameを使用する際はfor文で回すのを忘れずに…！
また、querySelectorは最初の該当要素しか取得しません！ご注意を！

本記事の next step として juner さんが各メソッドの使えるインスタンスの違いなどをより詳しく書かれていますので、こちらにて紹介させていただきます。
https://zenn.dev/juners/articles/598341d5af4f35