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 がわかっている要素を取得するときは積極的に使っていきましょう。
