getElementByIdを使用してHTML要素を簡単に取得

Webページは様々な要素で構成されています。

テキスト、画像、ボタンなど、目に見える要素はもちろん目に見えないスクリプトやスタイルシートなども要素として存在します。

getElementByIdは、HTML要素の id 属性を指定することでその要素を取得することができます。

本記事では「getElementById」について説明します。

この記事でわかること

getElementByIdとは？

「getElementById」とは、Web開発においてJavaScriptを使用してHTML文書から特定の要素を取得するための非常に基本的なメソッドです。

このメソッドは、指定されたID属性を持つHTML要素を返します。

たとえば、HTML文書にある特定のテキストやフォームフィールドにアクセスし、それらを操作したい場合に役立ちます。

特定の要素に対してスタイルの変更、コンテンツの更新、イベントリスナーの追加など様々な操作を効率的に行うことができます。

getElementByIdは、documentオブジェクトのメソッドです。

documentオブジェクトはWebページ全体の情報を表すオブジェクトです。

getElementByIdは引数としてID名を受け取り、そのIDを持つ要素をElementオブジェクトとして返します。

JavaScript
const titleElement = document.getElementById(“main-title”); console.log(titleElement); // <h1>ようこそ！</h1>

上記のコードでは、document.getElementById(“main-title”)によって、IDがmain-titleのh1要素を取得し、titleElementという変数に格納しています。

getElementByIdで取得した要素は、様々な操作に利用できます。

JavaScript
// 要素の内容を変更 titleElement.textContent = “新しいタイトル”; // 要素のスタイルを変更 titleElement.style.color = “red”; // 要素にイベントを登録 titleElement.addEventListener(“click”, () => { alert(“クリックされました！”); });

上記のコードでは、取得したh1要素の内容を変更したり、スタイルを変更したり、クリックイベントを登録したりしています。

HTML
<div id=”my-element”> <h1>タイトル</h1> <p>本文</p> </div>

JavaScript
const element = document.getElementById(“my-element”); // 要素の取得に成功した場合 if (element) { console.log(“要素を取得しました”); console.log(element); } else { console.log(“要素が見つかりません”); }

上記のコードでは、id=”my-element”を持つ要素を取得しelement 変数に格納しています。element 変数には Element オブジェクトが格納されるので、そのオブジェクトを使って要素の操作を行うことができます。