Terms Privacy

© Rollpie

JavaScript
15 Jan 2026

getElementById で要素を取得する

JavaScript で DOM を操作するとき、まず最初に覚えるのが getElementById です。これは HTML 要素を id 属性で取得するメソッドで、もっともシンプルな要素取得方法といえます。

基本的な使い方

document.getElementById() に id 名を文字列で渡すと、その要素を取得できます。

<p id="message">こんにちは</p>
const element = document.getElementById('message');
console.log(element.textContent); // "こんにちは"

id は HTML 文書内で一意である必要があります。同じ id が複数あると、最初に見つかった要素だけが返されます。

要素が存在しない場合

指定した id の要素が見つからない場合、null が返ります。

const element = document.getElementById('存在しないid');
console.log(element); // null

そのため、取得した要素を使う前に存在チェックをするのが安全です。

const element = document.getElementById('message');
if (element) {
  element.textContent = '新しいメッセージ';
}

getElementById の特徴

シャープは不要

CSS セレクタでは #message と書きますが、getElementById では message だけで OK です

戻り値は単一要素

配列ではなく、Element オブジェクトそのものが返ります。存在しなければ null です

実際に動かしてみよう

ボタンをクリックすると、id で取得した要素のテキストが変わります。

HTML
CSS
JavaScript
<p id="target">ここが変わります</p>
<button id="btn">クリック</button>
document.getElementById('btn').addEventListener('click', function() {
  const target = document.getElementById('target');
  target.textContent = '変わりました！';
});

getElementById は高速でシンプルなので、id がわかっている要素を取得するときは積極的に使っていきましょう。

7 views