JavaScriptで要素を取得する方法を徹底解説！

JavaScriptでWebページを操作する際、まず必要になるのが「要素の取得」です。ボタンのクリックでテキストを変更したり、特定の要素を非表示にしたりするには、適切な方法で要素を取得することが不可欠です。

JavaScriptには、要素を取得するためのさまざまなメソッドが用意されています。getElementById や querySelector など、状況に応じて適切な方法を選ぶことで、スムーズな開発が可能になります。

本記事では、基本的な取得方法から、実践的な活用方法まで詳しく解説します。「どの方法を使えばいいかわからない」「取得したつもりなのにうまく動かない」といった悩みをお持ちの方は、ぜひ参考にしてください。

要素を取得する基本的な方法

JavaScriptでは、Webページの要素を取得するためにいくつかの基本的なメソッドが用意されています。ここでは、最もよく使われる3つの方法を紹介します。

【getElementById】IDで取得する

特定の要素を取得する最もシンプルな方法が、getElementById です。
これは、指定したidを持つ要素を取得します。

const title = document.getElementById("main-title");
console.log(title.textContent); // 取得した要素のテキストを表示

ポイント

• idはページ内で一意であるため、複数の要素を対象にできません。
• 取得できない場合は null が返るため、存在チェックが必要です。

【getElementByClassName】クラス名で取得する

getElementsByClassName を使うと、指定したクラスを持つ要素をすべて取得できます。
このメソッドは HTMLCollection を返すため、配列のように扱えます。

const items = document.getElementsByClassName("list-item");
console.log(items.length); // クラス名 "list-item" の要素数を表示
console.log(items[0].textContent); // 最初の要素のテキストを表示

ポイント

• 取得できるのは ライブコレクション（動的なリスト）であり、DOMが変更されると自動で反映されます。
• Array.from() で配列に変換すると、forEach() などのメソッドが使いやすくなります。

【getElementByTagName】タグ名で取得する

getElementsByTagName は、指定したタグ名の要素をすべて取得します。
例えば、すべての <p> タグを取得したい場合に便利です。

const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // ページ内の <p> タグの数を表示

ポイント

• こちらも HTMLCollection を返すため、直接 map() などは使えません。
• getElementsByClassName 同様に ライブコレクション であるため、要素の追加・削除に応じて内容が変わります。

querySelector・querySelectorAll の活用

JavaScriptで要素を取得する方法の中でも、querySelector と querySelectorAll は柔軟に使える強力なメソッドです。CSSセレクタを利用できるため、クラス名・タグ名・属性などを組み合わせて、直感的に要素を取得できます。

【querySelector】最初にマッチする要素を取得

querySelector は、指定したCSSセレクタに一致する最初の要素を取得します。

const firstItem = document.querySelector(".list-item");
console.log(firstItem.textContent); // 最初の .list-item を持つ要素のテキストを取得

ポイント

• 最初にマッチした1つの要素を取得する。
• ID、クラス、タグなどを組み合わせたセレクタを使用可能（例："#header .nav-item"）。
• 該当する要素がない場合は null が返る。

【querySelectorAll】すべてのマッチする要素を取得

querySelectorAll は、指定したCSSセレクタに一致するすべての要素を取得します。
戻り値は NodeList であり、配列のように扱うことができます。

const allItems = document.querySelectorAll(".list-item");
allItems.forEach(item => console.log(item.textContent)); // すべての .list-item のテキストを表示

ポイント

• マッチするすべての要素を取得する。
• NodeList を返すため、forEach() でループ処理が可能。
• 配列のメソッド (map(), filter()) を使う場合は Array.from() で変換すると便利。

特定の条件で要素を取得する方法

JavaScriptでは、基本的な取得メソッドだけでなく、特定の条件を満たす要素を取得する方法もあります。ここでは、条件付きで要素を取得する実用的なテクニックを紹介します。

親要素内の特定の要素を取得する

取得した要素の中から、さらに特定のタグやクラスを持つ要素を取得することができます。
この場合、querySelector を活用すると便利です。

const container = document.getElementById("container");
const firstButton = container.querySelector("button"); // container内の最初のを取得
console.log(firstButton.textContent);

ポイント

• querySelector を使うことで、親要素の中から特定の要素を取得可能。
• 親要素が null にならないよう、事前にチェックするのが安全。

クラス名と条件を組み合わせて取得

すべての要素を取得してから、特定の条件に合うものだけをフィルタリングする方法もあります。
例えば、getElementsByClassName で取得した要素のうち、特定の属性を持つものだけを取得できます。

const items = Array.from(document.getElementsByClassName("list-item"));
const activeItem = items.find(item => item.dataset.status === "active"); // data-status="active" の要素を取得
console.log(activeItem?.textContent);

ポイント

• Array.from() でHTMLCollectionを配列に変換し、find() や filter() を使用可能にする。
• ?.（オプショナルチェーン）を使うことで、取得できなかった場合のエラーを防ぐ。

特定のテキストを含む要素を取得

要素の内容（テキスト）を判定して、条件に合うものだけを取得する方法です。
querySelectorAll で要素を取得し、filter() で条件を適用します。

const paragraphs = Array.from(document.querySelectorAll("p"));
const targetParagraph = paragraphs.find(p => p.textContent.includes("JavaScript"));
console.log(targetParagraph?.textContent);

ポイント

• querySelectorAll は NodeList を返すため、Array.from() で配列化すると扱いやすい。
• includes() を使って、特定のキーワードを含む要素を取得できる。

まとめ

JavaScriptで要素を取得する方法にはさまざまな種類があり、用途に応じて適切なメソッドを選ぶことが重要です。

🔹 主な要素取得メソッド

🔹 どの方法を使うべきか？

• IDで要素を取得したい場合 → getElementById
• クラスやタグの要素をリストで取得したい場合 → getElementsByClassName, getElementsByTagName
• CSSセレクタで柔軟に取得したい場合 → querySelector, querySelectorAll

JavaScriptでの要素取得をマスターすることで、動的なWebページの操作がスムーズになります。
適切なメソッドを使い分け、効率的なコードを目指しましょう！

【JavaScript】DOM操作をマスターしよう！基本から応用まで解説！

JavaScriptを使えば、HTMLの要素（DOM）を自由に操作できます。ボタンをクリックするとテキストが変わる、フォームの入力内容を取得する、動的にリストを追加する・・・こうした動作はすべてDOM操作によって実現されます。 本記事では、DOMとは何か？という基本を初心者向けに解説していきます。

nankurunikki.com

2025.02.08