JavaScript: getElementById() id属性値で要素を取得する

id属性値で要素を取得する場合は、document オブジェクトの getElementById() メソッドを使用します。

分解すると get、Element、By、Id の4つに分解できます。 最初の get は全て小文字ですが、他は先頭が大文字です。

1つのHTMLドキュメントの中にid属性は1つですから、「Element」と単数形になっています。

getElementsByTagName()や、getElementsByClassName()は「Elements」です。 最初のうちは間違えやすいので注意してください。

書式

document.getElementById('id属性値')

サンプルコード

div 要素(id="start")の内容を取得するプログラムです。


<div id="start">Start Game</div>

<script>
    // 要素を取得
    var d = document.getElementById('start');
    
    // 要素内容
    console.log(d.innerHTML);
</script>

「document.getElementById('start')」で要素を取得して、 d.innerHTML で要素内容を取得しています。

要素内容を変更する場合は次のように記述します。

d.innerHTML = '新しいコンテンツ';
JavaScript入門