JavaScriptで要素を取得する方法まとめ

JavaScriptでHTML要素を操作するには、まず「要素を取得する」必要があります。
この記事では、よく使う要素取得の方法を分かりやすく解説します。

---

1. IDを指定して取得する

document.getElementById('sample')

特徴

• IDはページ内で一意（1つだけ）
• 最もシンプルで高速
• よく使う

ポイント

「この1つだけ取れればいい」という場合に最適です。

---

2. クラス名で取得する

document.getElementsByClassName('sample')

特徴

• 同じクラスは複数存在する
• HTMLCollection（配列のようなもの）で返る

注意点

const elements = document.getElementsByClassName('sample');
elements[0].style.color = 'red';

👉 そのままでは使えず、配列のように扱う必要あり

よくあるミス

• 1つだけと思って使うとバグる
• ループ処理が必要になる

---

3. CSSセレクタで1つ取得（querySelector）

document.querySelector('#sample p')

特徴

• CSSと同じ書き方で指定できる
• 最初にマッチした1つだけ取得

例

document.querySelector('.box')
document.querySelector('#id')
document.querySelector('ul li a')

ポイント

• 柔軟性が高い
• 「ちょっと複雑な指定」をしたいときに便利

---

4. 条件に一致するすべて取得（querySelectorAll）

document.querySelectorAll('.hoge')

特徴

• すべての要素を取得
• NodeList（配列っぽい）で返る

使い方

const elements = document.querySelectorAll('.hoge');

elements.forEach(el => {
  el.style.color = 'blue';
});

ポイント

• ループ処理と相性が良い
• 今の主流

---

5. タグ名で取得する

document.getElementsByTagName('li');

特徴

• 指定したタグをすべて取得
• HTMLCollectionで返る

使用例

const items = document.getElementsByTagName('li');

ポイント

• シンプルだが用途はやや限定的

---

【補足】よく使うその他の方法

name属性で取得

document.getElementsByName('username')

用途

• フォーム系で使うことが多い

---

親要素から探す

parentElement.querySelector('.child')

👉 特定の範囲内だけで探せるので便利

---

closest（親方向に検索）

element.closest('.container')

👉 自分から上の階層に向かって検索

---

children / firstElementChild など

element.children
element.firstElementChild

👉 DOMの構造を辿るときに使用

---

【まとめ】どれを使うべき？

方法	特徴
getElementById	1つだけ取得・高速
getElementsByClassName	複数取得（古め）
querySelector	柔軟・1つ取得
querySelectorAll	柔軟・複数取得
getElementsByTagName	タグ単位

---

結論

• 基本はこれでOK
  • 1つ → querySelector
  • 複数 → querySelectorAll
• IDがあるなら
  • getElementById が最速