【JavaScript】要素を取得する方法を初心者向けにわかりやすく解説
はじめに
JavaScriptでは、ブラウザ上で動作するプログラムによって画面の内容を動的に変更できる点が特徴です。
そのためには、まずHTMLの要素を取得する必要があります。
具体的には、テキストの変更やスタイルの変更、クリックイベントの設定など、多様な操作が可能です。
しかし、要素の取得方法がわからないと、思うように画面を変更できず、プログラミングが楽しく感じられなくなることがあります。
実際に要素を取得する方法は複数あり、初心者にはやや混乱しがちです。
この記事では、JavaScript 要素 取得 の基本的な手順から少し応用的な使い方まで、丁寧に解説していきます。
最初のうちは単純なサンプルから始め、少しずつ知識を積み上げましょう。
この記事を読むとわかること
- JavaScript 要素 取得 の基本的な方法
- getElementByIdやquerySelectorなど主要なメソッドの使い方
- 複数の要素をまとめて取得する際のコツ
- 実際に開発するときの具体的な活用シーン
- 初心者が陥りがちなミスの対処法
JavaScriptで要素を取得する基礎
JavaScriptでHTML要素を操作する際に欠かせないのが、DOMと呼ばれる仕組みです。
DOMはHTMLドキュメントをツリー構造で表し、JavaScript側からHTMLを扱いやすくしてくれます。
どのように取得するかは状況によって異なり、最適な方法を使うとコードの可読性や保守性が向上しやすくなります。
DOMとは何か
DOM（Document Object Model）は、ブラウザがHTMLドキュメントを解釈した結果の構造のことです。
たとえば、<body>タグの中に<div>タグがあれば、そこに含まれる要素は親子関係を持ったオブジェクトとして扱われます。
JavaScriptは、このツリー状のオブジェクトにアクセスして要素を取り出し、テキストやスタイルを変更できます。
実務では、DOMを理解しているかどうかで開発効率が大きく変わります。
初心者の方は、まずは「HTMLドキュメントがツリー構造のオブジェクトになっている」といった基本イメージを押さえるとよいでしょう。
要素を取得する主なメソッド一覧
次に、要素を取得する主なメソッドを簡単にリストアップしておきます。
後ほど各メソッドを詳細に解説し、サンプルコードも紹介します。
- document.getElementById
- document.getElementsByClassName
- document.getElementsByTagName
- document.querySelector
- document.querySelectorAll
初心者の方がよく使うのは、getElementByIdとquerySelectorの2つです。
プロジェクトの規模や目的によっても使い分けが変わります。
ここでは、なるべく実務につながるように具体的なサンプルを通して紹介していきます。
getElementByIdを使った要素の取得
基本的な使い方
getElementByIdは、HTML要素に設定されたid属性をもとに要素を取得するメソッドです。
idは一意でなければならないというルールがあるため、1つだけ 該当要素を返します。
たとえば、次のようなHTMLを用意したとします。
<div id="main-content">ここにメインのテキストが入ります</div>
この要素をJavaScriptで取得するには、以下のように書きます。
const mainContent = document.getElementById("main-content"); console.log(mainContent.textContent);
こうすると、変数 mainContent には <div id="main-content"> の要素が代入されます。
あとは textContent プロパティを確認することで、実際のテキストにアクセスできます。
getElementByIdを使うメリットと実務でのシーン
getElementByIdは特定の要素をシンプルに取得するのに向いています。
フォームの送信ボタンや見出し要素など、画面上で「ここだけを扱いたい」という場合に便利です。
実務でも、例えば「画面ロード後にメインの案内文を変更する」といった処理が必要なケースはよくあります。
以下のように書けば、特定要素の文字を動的に切り替えることができます。
const mainContent = document.getElementById("main-content"); mainContent.textContent = "新しいお知らせを表示します。";
これだけで、HTML上のテキストが「新しいお知らせを表示します。」に変わります。
初心者の方でも理解しやすいですし、シンプルな場面ならばこのメソッドを選ぶ人が多いでしょう。
getElementsByClassNameとgetElementsByTagName
getElementsByClassName
クラス名（class）を使って要素を取得したい場合、getElementsByClassNameを使うと複数の要素をまとめて取得できます。
ただし、戻り値としてHTMLCollection が返ってきます。
これは配列のように見えますが、直接配列メソッドを使うには工夫が必要です。
たとえば、以下のようなHTMLがあったとします。
<p class="article">記事1</p> <p class="article">記事2</p> <p class="article">記事3</p>
このクラスを持つ要素をすべて取得するには、次のように書きます。
const articles = document.getElementsByClassName("article"); console.log(articles.length); // 要素が3つあることを確認
articlesには3つのpタグが含まれます。
HTMLCollectionはライブコレクションと呼ばれ、DOMが変更されると自動で内容が更新される特性があります。
実務では「あとから要素を追加・削除する場合」にこの特性を意識するといいでしょう。
getElementsByTagName
getElementsByTagNameは、タグ名（例：div, p, spanなど）を指定して要素を取得するメソッドです。
たとえば、ページ内のすべての画像を取得したいなら、以下のように書きます。
const images = document.getElementsByTagName("img"); console.log(images.length); // ページ内の<img>の数を確認
実務では、特定のタグをまとめて処理したいケースが少なくありません。
ただし、あまりに多用すると、意図しない要素まで取得してしまうことがあるため注意が必要です。
適切なクラス名やidを使って絞り込む方が、後々の保守性は高くなります。
querySelectorとquerySelectorAll
CSSセレクタで要素を取得するメリット
querySelectorとquerySelectorAllは、CSSセレクタを用いて要素を取得するためのメソッドです。
これは、getElementByIdやgetElementsByClassNameなどのメソッドをすべて代用できるほど強力です。
シンプルな構文例:
const headerTitle = document.querySelector("h1");
こうすると、ページ内最初のh1要素を取得できます。
また、クラス名やidなど、CSSセレクタで使える記法ならほとんど活用できます。
querySelectorの基本構文
たとえば、idがmain-contentの要素を取得するには以下のように書きます。
const mainContent = document.querySelector("#main-content");
クラスなら、次の通りです。
const someClass = document.querySelector(".some-class");
あくまで「最初に見つかった要素1つ」だけが返ってくるという点が特徴です。
さらに、複雑なセレクタも使えるので、実務ではUI要素の階層を指定して取得することが多いでしょう。
たとえば、クラスがmenuのul要素の配下にあるリンク（aタグ）のみを取得するようなセレクタを指定することも可能です。
querySelectorAllで複数要素を取得
一方、querySelectorAllはセレクタに合致する要素をすべて取得します。
戻り値はNodeList というオブジェクトです。
HTMLCollectionと似ていますが、NodeListはクラスメソッドなどが若干異なるので、初心者の方は公式ドキュメントを参照すると理解が進むでしょう（参考程度の意味で述べています）。
const menuLinks = document.querySelectorAll(".menu a"); menuLinks.forEach((link) => { console.log(link.textContent); });
この例では、クラスがmenuの要素の中にあるすべてのa要素を取得し、そのテキストをまとめて出力しています。
NodeListにはforEachメソッドが使えるため、配列のように扱いやすい点が利点です。
それぞれのメソッドを使い分けるポイント
id指定がはっきりしている場合
1つの要素だけを単純に取得したい場合はgetElementByIdがおすすめです。
シンプルで処理も高速なため、特定の要素操作なら迷わずこちらを使うことが多いでしょう。
複数要素をクラス名やタグ名で一括取得したい場合
getElementsByClassNameやgetElementsByTagNameを利用すると、ライブコレクションとしてリアルタイムに要素変動が反映されます。
ただし、この特性が必須でないケースでは、querySelectorAllを選ぶ方も増えています。
複雑な条件で取得したい場合
CSSセレクタを自由に使いたい場合はquerySelectorやquerySelectorAllが柔軟で便利です。
階層指定や属性指定などをまとめて記述できるため、実務ではこちらが好まれやすいかもしれません。
実際の開発で活用されるシーン
フォーム入力のバリデーション
フォームの入力欄をまとめて取得し、一度にチェックを行うシーンでは、querySelectorAllで特定のクラスを一括取得する場合があります。
また、送信ボタンが押されたときだけ動的にメッセージを表示したいときは、1つの要素だけをgetElementByIdで取得することもよくあります。
const inputs = document.querySelectorAll(".required"); inputs.forEach((input) => { if (input.value.trim() === "") { // エラー処理など } });
このように、特定クラスが付与された入力要素に対してループ処理を行うことで、まとめて入力チェックをするケースが一般的です。
動的に生成した要素を操る
JavaScriptで要素を新規に生成し、それをDOMツリーに追加するシーンもあります。
そこで追加した要素に対して、再度querySelectorAllやgetElementsByClassNameなどを使い、複数要素をまとめて操作します。
特定の親要素の中にだけ存在する要素を集めたい場合は、親要素の参照からquerySelectorAllを呼び出すと便利です。
const parent = document.getElementById("parent-container"); const newDiv = document.createElement("div"); newDiv.classList.add("child-item"); parent.appendChild(newDiv); // 追加後に再度取得 const children = parent.querySelectorAll(".child-item"); console.log(children.length);
上記のように、「どの範囲で取得したいか」によって、呼び出し元のオブジェクトを適切に指定する必要があります。
スタイルやクラスを切り替える
要素を取得したあと、その要素にクラスを付与したり外したりすることはよくあります。
動的にクラスを付け外しすることで、画面の見た目を切り替えられるため、インタラクティブなUIが構築しやすくなります。
const toggleButton = document.querySelector(".toggle-btn"); const targetElement = document.querySelector(".toggle-target"); toggleButton.addEventListener("click", () => { targetElement.classList.toggle("active"); });
イベントリスナーをセットするときにも、まず要素をきちんと取得しておく必要があります。
このように、要素の取得はあらゆる操作の出発点と言えるでしょう。
NodeListとHTMLCollectionの違い
ライブコレクションかどうか
getElementsByClassNameやgetElementsByTagNameで返ってくるHTMLCollection は、ライブコレクションです。
一方、querySelectorAllで返ってくるNodeList は基本的に静的です。
この違いが開発に与える影響を初心者の方は把握しておくと混乱を避けられます。
- HTMLCollection: DOMが変化すると自動的に中身も変わる
- NodeList: 原則としてDOMが変化してもその後に取得した状態を保持する
実務で大量の要素を扱う場合は、思わぬ挙動を起こさないように注意しましょう。
使い勝手の違い
HTMLCollectionは配列のメソッド（mapやforEachなど）が直接使えないため、配列風に扱うならスプレッド演算子などで変換する必要があります。
NodeListは一部の配列メソッドが使えるものの、古いブラウザ環境だと対応していないケースもあるため注意が必要です。
実務で動作の違いを明確にするためには、開発環境に合わせた検討が必要です。
チーム内で「HTMLCollectionよりNodeListを採用しよう」といった方針を決めることで、コードの統一感が保ちやすくなります。
よくある失敗例と対処法
idの重複で要素が正しく取れない
HTML上でidを重複して使ってしまうと、getElementByIdを呼び出したときの挙動が不安定になるケースがあります。
そもそもidはページ内で一意である必要があるため、要素数が多い場面では無理にidを振りすぎないのが無難です。
もし複数要素をまとめて扱いたいならクラスを使うのが一般的です。
セレクタが間違っている
CSSセレクタを使うquerySelectorやquerySelectorAllで、. や # の付け忘れ、スペルミスが初心者には多いです。
取得できていないのに気づかず、エラーが出ないためにデバッグが大変なケースもあります。
最初はコンソールに要素の中身を出力してみる習慣をつけ、想定通りの値になっているか確認するのがおすすめです。
要素がまだ描画されていない段階で取得しようとしている
DOMが生成される前に要素を取得しようとすると、期待した要素を取り出せないことがあります。
スクリプトをロードする順番や、DOMContentLoadedイベントを考慮しないと、常にnullが返ってくるような事態に陥ります。
特に初心者が最初にハマるポイントなので、スクリプトの読み込みタイミングを意識する癖をつけるとスムーズです。
DOMの読み込み順序はとても重要です。
JavaScriptコードをHTMLファイルの末尾に書くか、DOMContentLoadedイベントでラップするなど、ロード完了を待ってから要素取得するようにしましょう。
実務でのパフォーマンスやメンテナンスを意識する
要素の取得は頻繁に行われる処理です。
単純なページならあまり影響がありませんが、大規模なWebアプリケーションになってくるとパフォーマンスを意識する必要があります。
同じ要素を何度も取得するようなケースでは、変数に格納して再利用するなどの工夫をするとよいでしょう。
また、要素名やクラス名を変更する際、取得ロジックとHTMLコードの整合性が崩れてしまうことがあります。
クラス名やid名を大幅に変更するときは、JavaScriptコードも合わせて修正し忘れないように注意が必要です。
コーディング規約を設ける
- id名は特定の重要な箇所でのみ使う
- クラス名はセレクタ指定をしやすい形にする
- フォーム要素やボタンなどは意味がわかりやすい命名にする
このような規約をチーム内で策定しておけば、後から見直す際にも苦労が減ります。
要素の取得と名前付けは切っても切れない関係なので、最初から整理しておくとメンテナンスがスムーズです。
まとめ
JavaScriptでの要素取得は、開発の入り口ともいえる重要なステップです。
初心者の方は、それぞれのメソッドの役割と戻り値の違いを理解し、「必要な要素を確実に取り出す」基礎スキルを身につけましょう。
慣れてきたらクラスの命名や、DOMをどのように構成するかといったトータルの設計にも目を向けると、より実務で役立つ知識が増えていくはずです。
特定の1つの要素をシンプルに取得したいならgetElementById。
複数要素をまとめて扱いたいならgetElementsByClassNameやquerySelectorAll。
複雑なセレクタで柔軟に要素を指定したいならquerySelectorとquerySelectorAll。
まずはこれらの使い分けを正しく理解し、いろいろな操作に挑戦してみましょう。