【JavaScript入門】getElementByIdとquerySelectorの違いとは？初心者向けにやさしく解説

1.はじめに

JavaScriptでWebページを操作するときに、「HTMLの要素を取得する」という作業はとてもよく出てきます。
このときによく使われるのが、getElementById と querySelector の2つです。

名前は似ていますが、実はこの2つには「指定できる方法」や「使いどころ」に違いがあります。

「何が違うの？」「どっちを使えばいいの？」という初心者の疑問を、この記事でスッキリ解消しましょう！

2.getElementByIdとは？

getElementById は、HTMLのID属性を指定して、その要素を取得するためのメソッドです。
JavaScriptで最も基本的な要素取得方法のひとつで、使い方もとてもシンプルです。

基本の書き方

const 要素 = document.getElementById("ID名");

"ID名"の部分には、HTMLで指定されたidの値を入れます。
#は不要です（CSSセレクタではないため）。

使用例

HTML側

<h1 id="title">こんにちは！</h1>

JavaScript側

const el = document.getElementById("title");
console.log(el.textContent); // → こんにちは！

このように、HTML内のid="title"がついた要素を取得し、textContentで中の文字を読み取ることができます。

特徴まとめ

項目	内容
対象	`id`属性だけ
取得できる数	一致する1つの要素
`#`の有無	不要（`"title"`と指定）
処理速度	速く、軽い
初心者向け度	非常に使いやすく、覚えやすい

注意ポイント

ページ内に同じIDが2つ以上あると、想定外の挙動になります（IDは本来、1つのページに1つだけ）。
クラス名やタグ名で取得したい場合には使えません。

3.querySelectorとは？

querySelector は、CSSセレクタを使ってHTMLの要素を1つ取得できるメソッドです。
柔軟に指定できるのが特徴で、IDだけでなくクラスやタグ名、複雑な階層構造まで対応しています。

基本の書き方

const 要素 = document.querySelector("CSSセレクタ");

CSSセレクタと同じ記述方法で指定します（#id, .class, div > pなど）
一致する最初の1つだけが取得されます

使用例

HTML側

<h1 id="title" class="main-heading">こんにちは！</h1>

JavaScript側（いろんな指定方法）

const el1 = document.querySelector("#title");         // IDで取得
const el2 = document.querySelector(".main-heading");  // クラスで取得
const el3 = document.querySelector("h1");             // タグで取得

console.log(el1.textContent); // → こんにちは！

特徴まとめ

項目	内容
対象	CSSセレクタ全般（ID, クラス, タグなど）
取得できる数	一致する最初の1つのみ
`#`や`.`の指定	必要（CSSと同じ）
処理速度	やや遅いが、柔軟で便利
初心者向け度	少し慣れが必要だが応用力が高い

注意ポイント

複数の要素を取得したい場合は querySelectorAll を使います
CSSセレクタに慣れていないと、少し難しく感じることもあります

4.違いを比較してみよう！

ここまでで getElementById と querySelector の基本的な使い方は分かりました。
このセクションでは、2つのメソッドの違いをわかりやすく一覧で比較してみましょう。

比較表

比較項目	`getElementById`	`querySelector`
指定方法	`id名`（`#`は不要）	CSSセレクタ形式（`#id`, `.class`など）
対象	ID属性のみ	ID、クラス、タグ、複雑な構造もOK
戻り値	一致する要素1つ	一致する最初の要素1つ
複数要素の取得	❌ 不可	❌ ※複数は`querySelectorAll()`で取得
柔軟性	限定的	非常に高い
パフォーマンス	高速	わずかに遅い（実用上ほぼ差なし）
初心者へのわかりやすさ	◎ わかりやすい	△ CSSセレクタの理解が必要

ポイントまとめ

シンプルにIDだけ取得したいなら getElementById が便利
いろんな指定方法で要素を選びたいなら querySelector が最適

このように、目的や状況によって使い分けるのがポイントです。

5.よくある間違いと注意点

getElementById と querySelector は似ているようでルールが異なります。
ここでは、初心者の方がよくやってしまうミスや注意点を紹介します。

getElementByIdに # をつけてしまう

document.getElementById("#title"); // ❌ → エラーになる
document.getElementById("title");  // ✅ → 正しい書き方

getElementByIdは「ID名だけ」を直接指定します。CSSセレクタのように#は不要です。

querySelectorに # をつけ忘れる

document.querySelector("title");   // ❌ → <title>タグと誤解されることも
document.querySelector("#title");  // ✅ → 正しい書き方

querySelectorはCSSと同じ指定方法が必要です。
IDなら#title、クラスなら.classNameのようにセレクタ記号を忘れずに。

同じIDが複数あると動作が不安定に

HTMLでは、同じIDはページ内に1つだけというルールがあります。
しかし、間違って同じIDを複数の要素につけてしまうと、どれが取得されるか分からなくなるため注意しましょう。

<!-- NGな例（IDが重複している） -->
<div id="box">1つめ</div>
<div id="box">2つめ</div>

const el = document.getElementById("box");
console.log(el.textContent); // → どちらか1つだけが取得される（不安定）

解決方法

複数使いたい場合は idではなく class にする
それに応じて querySelector または querySelectorAll を使う

6.初心者にはどちらがオススメ？

ここまでで getElementById と querySelector の使い方や違いを理解できたと思います。
では実際に、初心者の方はどちらを使えばいいのでしょうか？

目的別のおすすめ早見表

やりたいこと	おすすめのメソッド
IDで1つの要素をピンポイントで操作したい	`getElementById`
クラス名で指定したい	`querySelector`
タグ名（例：`h1`, `p`など）で選びたい	`querySelector`
複雑なCSSセレクタ（例：`div > p span`）を使いたい	`querySelector`
1ページに1つしかない要素を手っ取り早く取得したい	`getElementById`