getElementById()は、JavaScriptにおけるDOM操作の基本的なメソッドの1つで、指定されたIDを持つ要素を取得するために使用されます。このメソッドはシンプルで使いやすく、HTML要素を操作する際の基本として頻繁に利用されます。今回は、基本的な使い方から注意点までをまとめていきたいと思います。
目次 非表示
document.getElementById()は、次のような特徴を持つメソッドです。
- 役割: DOMツリーから指定された
id属性を持つ要素を取得します。 - 戻り値: 該当する要素（1つだけ）。該当する要素が存在しない場合は
nullを返します。 - 識別:
id属性はHTML文書内で一意である必要があります。そのため、このメソッドは常に1つの要素だけを取得します。
以下は、getElementById()の基本的な使用例です。
See the Pen getElementById by tones (@tonescodedesign) on CodePen.
/ ボタンをクリックしたときにテキストを変更する例
document.getElementById('changeText').addEventListener('click', () => {
const titleElement = document.getElementById('title');
if (titleElement) {
titleElement.textContent = 'おはようございます！';
} else {
console.error('指定されたIDの要素が見つかりませんでした。');
}
});<h1 id="title">こんにちは！</h1>
<button id="changeText">テキストを変更</button>このコードでは、ボタンをクリックするとid="title"を持つ<h1>要素のテキスト内容が変更されます。
以下は、document.getElementById()を使ってページの背景色を変更する例です。
See the Pen getElementById by tones (@tonescodedesign) on CodePen.
document.getElementById('changeColor').addEventListener('click', () => {
document.body.style.backgroundColor = 'lightblue';
});<button id="changeColor">背景色を変更</button>以下は、document.getElementById()を使ってページの背景色を変更する例です。
HTML文書内で同じid属性を複数の要素に付与しないようにしましょう。idが重複している場合、document.getElementById()は最初に一致した要素だけを返します。
存在しないIDを指定すると、nullが返されます。そのため、取得した要素がnullでないことを確認してから操作を行うことが重要です。
const element = document.getElementById('nonexistentId');
if (element) {
// 要素が存在する場合の処理
} else {
console.warn('指定されたIDの要素が見つかりませんでした。');
}- 動的に変更されるコンテンツには、スクリーンリーダーが認識できるよう適切なARIA属性や
roleを付与することを検討してください。 - 例えば、次のように
aria-live属性を使用すると、動的に変更されたテキストがスクリーンリーダーで読み上げられます。
<h1 id="title" aria-live="polite">こんにちは！</h1>document.getElementById()は、JavaScriptでHTML要素を操作する際に最も基本的でよく使われるメソッドの1つです。シンプルで効率的な反面、idの一意性を保つことやnullチェックを行うことなど、いくつかの注意点を守る必要があります。
