JavaScriptのDOM操作：要素取得メソッドの違いと注意点まとめ

初めに

JavaScriptでDOM操作をする上で避けて通れないのが「要素の取得」です。
しかし、getElementById や querySelector、getElementsByClassName など、似たようなメソッドがたくさんあって混乱してしまいがちです。

本記事では、DOM要素の取得方法について、それぞれの違いや返り値の型、注意点を整理してまとめてみました。

特に、「返り値の型がHTMLElementではない」 ことに関して、つまずきやすいポイントに触れていきます。

※勉強の備忘をかねているため、間違っている箇所や修正した方がいい箇所等ございましたら、教えていただけると幸いです。

---

🎯 この記事でわかること

• DOM要素を取得する主なメソッドの違い
• 各メソッドの返り値とその型
• 実際の使い分け

---

📌 主な要素取得メソッドとその違い

メソッド名	セレクタ形式	返り値の型	特徴
getElementById	id名	HTMLElement or null	最も単純。IDは一意
getElementsByClassName	class名	HTMLCollection	複数要素。ライブコレクション
getElementsByTagName	タグ名	HTMLCollection	同上
querySelector	CSSセレクタ	Element or null	最初の1つを取得
querySelectorAll	CSSセレクタ	NodeList	全ての一致要素。静的コレクション

---

🔍 返り値の型に要注意！

HTMLCollectionとNodeListは配列ではない！

たとえば、getElementsByClassName や getElementsByTagName が返す HTMLCollection は配列のように見えるけど配列ではないため、直接 forEach などは使えません。

const items = document.getElementsByClassName('item');

// ❌ エラーになる
items.forEach(item => {
  console.log(item);
});

// ✅ 正しい方法（配列に変換する）
Array.from(items).forEach(item => {``
  console.log(item);
});

---

ライブコレクションと静的コレクションの違い

HTMLCollection(getelements系)→ライブコレクション
NodeList(querySelectorAll)→静的コレクション

HTMLCollectionは取得後に条件一致する要素が追加されたり、削除された場合、自動で値が変更される。 (意図しない挙動になることがあるため、使用する際は注意が必要。)

NodeList(querySelectorAllで取得した場合)は取得後に条件一致する要素が追加されたり、削除された場合も、値が変更されない。

const list = document.getElementsByClassName('item');
const nodeList = document.querySelectorAll('.item');

const newDiv = document.createElement('div');
newDiv.className = 'item';
document.body.appendChild(newDiv);

console.log(list.length);     // ✅ 自動で増える
console.log(nodeList.length); // ❌ 増えない

メゾットの戻り値の型によって、挙動が若干違うことは頭の隅にとどめておきましょう。

---

✅ 使い分けのコツ

やりたいこと	おすすめメソッド	理由
特定のIDの要素を1つ取得したい	getElementById	最もシンプルで高速。IDはHTML上で一意であるべき
最初に一致した要素を柔軟に取得したい	querySelector	CSSセレクタで柔軟に指定可能。指定したクラス名に合致した最初の要素を1つ取得できる
複数の要素をまとめて取得してループ処理したい	querySelectorAll	forEachが使える静的なNodeListで扱いやすい
クラス名やタグ名で複数要素を取得したい	getElementsByClassName / getElementsByTagName	ライブコレクションだが、注意して使えばOK。

おわりに

私がjavascriptを学習する中で躓いたDOM操作のメゾットについてまとめてみました。

最後までお読みいただき、ありがとうございました！

参考

MDNリファレンス:Documentオブジェクト