【初心者向け】JavaScriptのgetElementByIdメソッドの使い方を徹底解説

Webページ上の要素をJavaScriptで選択したいと思ったことはありませんか？それを担うのが、JavaScriptの要素ゲッター（getter）の中でも「王様」と呼ばれる getElementById メソッドです。

getElementById を使うと、要素のIDをもとにその要素を選択できます。メソッド名を見れば、何をするものなのか直感的にわかりますよね。

このガイドでは、getElementById とは何か、どのように動作するのか、そしてコード内でいつ使うべきかについて解説します。デモとして、「続きを読む／閉じる」テキストボタンの実装例も一緒に見ていきましょう。

それでは始めましょう！

getElementByIdとは？

getElementById() はDocumentオブジェクトのメソッドで、指定したID属性をもとに、HTML DOMから該当する要素を選択します。

次のコードを見てみましょう。

index.html

<button id="mainButton">これはボタンです！</button>

scripts.js

const button = document.getElementById("mainButton");

HTML側では、IDが mainButton の <button> 要素を定義しています。JavaScriptのコードは、getElementById() メソッドを使ってこの要素を取得します。

このメソッドは、ページ上の単一の要素を取得したい場合に便利です。HTMLやCSSを学んだことがある方ならご存知のとおり、IDはページ内で一意（ユニーク）である必要があります。そのため、getElementById() は単一の要素を取得するのに最適なのです。

要素にIDを割り当てている場合は、このメソッドを使うとよいでしょう。条件に合う最初の要素を返す querySelector などの、より広範なゲッターを使う代わりに、getElementById() なら目的の要素をピンポイントで取得できます。

getElementById() は、Webページ上の要素を取得するためによく使われる定番メソッドです。

getElementByIdを使う前に知っておくべきこと

実例に入る前に、初心者がこのメソッドを使う際につまずきやすいポイントについて触れておきます。

新しいことを学んでいるのに思うように動かないのは、とてもストレスが溜まるものです。ここでは、getElementById() に慣れるまでの間に陥りやすい、よくあるエラーを紹介します。

1つ目の注意点は、getElementById() は大文字と小文字を区別するという点です。プログラミングでは「ID」という言葉は通常すべて大文字で表記されますが、このメソッドではキャメルケースの Id を使う必要があります。そうしないと、メソッドが正しく動作しません。

2つ目の注意点は、指定するIDにシャープ記号（#）を含めてはいけないという点です。次のコードを見てください。

const button = document.getElementById("#mainButton");

一見すると、このコードはIDが mainButton の要素を取得できそうに見えますが、実際にはそうなりません。取得したい要素のIDだけを指定してください。

const button = document.getElementById("mainButton");

これで注意点は押さえたので、実際の例を見ていきましょう。

getElementByIdの使い方

Webを閲覧していると、「続きを読む」というリンクやボタンを目にすることがありますよね。Webページでは本文の冒頭数文だけを表示し、残りのテキストを読むにはボタンを押すよう促される仕組みです。

今回は、getElementById() ゲッターを使って、この機能を実装してみます。

フロントエンドの作成

まずは、HTMLとCSSを使ったシンプルなフロントエンドを作成しましょう。index.htmlという新しいファイルを作成し、以下のコードを貼り付けてください。

<!DOCTYPE html>
<html>
    <head>
        <title>getElementById()入門</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div>
            <h1>JavaScript getElementById()</h1>
            <p>getElementById()について詳しく知りたい方は、ここがまさにうってつけの場所です。</p>
            <span id="showMore">続きを読む</span>
            <p id="hiddenText">getElementById()は、Webページ上の要素を選択できるJavaScriptのメソッドです。ページから要素を「取得（get）」することから、「ゲッター」と呼ばれることもあります。</p>
        </div>
    </body>
    <script src="scripts.js"></script>
</html>

このドキュメントでは、getElementById() メソッドに関する情報を含むボックスを定義しています。ボックスの中には、見出し、2つの段落、そして最後の段落を表示するために使う span タグが入っています。

続いて、styles.cssファイルを作成し、以下のCSSを貼り付けてください。

/* styles.css */
div {
    max-width: 600px;
    margin: 40px auto;
    padding: 24px;
    border: 2px solid #333;
    border-radius: 8px;
    font-family: sans-serif;
}

#showMore {
    color: #0066cc;
    cursor: pointer;
    text-decoration: underline;
}

このCSSにより、ページに色味が加わり、視覚的にも魅力的になります。Webページを開くと、次のように表示されます。

【初心者向け】JavaScriptのgetElementByIdメソッドの使い方を徹底解説

ただし、1つ問題があります。「続きを読む」の表示は何も動作せず、最後の段落も最初から表示されたままです。これはまだJavaScriptのコードを追加していないためです。次に、Webページ用のJavaScript機能を書いていきましょう。

JavaScriptコードの追加

まずは、操作対象となる要素を選択するところから始めます。選択が必要なのは、<span> タグ（「続きを読む」のテキストが入っている要素）と、表示・非表示を切り替えたい段落の2つです。

scripts.jsというファイルを作成し、以下のコードを貼り付けてください。

var paragraph = document.getElementById("hiddenText");

paragraph.style.display = "none";

このコードでは、getElementById() を使ってDOMから段落を取得しています。hiddenText のドキュメントオブジェクトを選択し、非表示に設定します。次に、テキストの表示を切り替える関数を作成しましょう。

function toggleText() {
    if (paragraph.style.display === "none") {
        paragraph.style.display = "block";
    } else {
        paragraph.style.display = "none";
    }
}

ここでは、IDが hiddenText の要素を選択しています。これは、「続きを読む」がクリックされたときに表示したり非表示にしたりしたい段落を指します。

if文を使って、その段落が非表示になっているかどうかをチェックしています。非表示の場合は段落の display の値が block に設定されて表示され、そうでなければ none に設定されて非表示になります。

まだコードは完成していません。次に、「続きを読む」のテキストがクリックされたときに発火するイベントリスナーを作成します。

var showButton = document.getElementById("showMore");

showButton.addEventListener("click", toggleText);

このコードは、ページ上の「続きを読む」テキストを選択し、クリックされたときに toggleText() メソッドが呼び出されるイベントリスナーを設定します。

それでは、Webページを開いて「続きを読む」のテキストをクリックしてみましょう。

コードが正しく動作しています！「続きを読む」をクリックするとテキストが表示され、もう一度クリックすると非表示になります。

まとめ

getElementById() ゲッターを使うと、IDをもとにWebページから要素を取得できます。

ちょっとしたチャレンジをしてみませんか？テキストが表示されているときに、「続きを読む」の表示を「閉じる」に変更する処理を getElementById() ゲッターで実装してみてください。さらに踏み込むなら、ページに画像をいくつか追加し、ボタンをクリックするとすべての画像が非表示になる機能を作るのもよい練習になります。

これであなたも、プロの開発者のように getElementById() ゲッターを使いこなせるようになりました！

初心者向けJavaScript配列ガイド：宣言から操作まで基礎をマスターしよう

【初心者向け】JavaScriptで文字列を反転させる3つの方法

HTMLのnoscript要素とは？使い方とJavaScript無効時の表示方法を解説
<noscript>要素とは HTMLの<noscript>要素は、サイト訪問者のブラウザでJavaScriptが無効になっている場合に、指定したコンテンツを表示するためのHTML要素です。たとえば、誰かがあなたのウェブサイトを訪れた際、ブラウザ設定でJavaScriptがオフになっていたとします。うっかり無効化しているケースも考えられるため、その訪問者に注意を促すメッセージを表示したいときに、<noscript>要素を次のように活用できます。 <noscript> <h2> お使いのブラウザではJavaScriptが無
HTMLの<title>要素の正しい使い方とSEO対策のポイント
この記事では、HTMLの<title>要素の基本的な使い方から、SEOにおける重要性までをわかりやすく解説します。 HTMLの<title>要素は、ウェブサイトのページタイトルを表す要素です。ページタイトルの確認方法閲覧中のウェブサイトのページタイトルを確認したい場合は、ブラウザのタブにマウスカーソルを合わせて数秒間静止してみましょう。完全なページタイトルがポップアップ表示されます。以下はYouTubeで実際に試した例です。 <title>要素の書き方 <title>要素を作成するには、開始タグと終了タグを使い、その間にタイトルとなるテキ