JavaScriptのgetElementById()の使い方

ここでは、JavaScriptでgetElementById()を用いてHTMLの要素を取得する方法について説明をしていきたいと思います。

getElementById()とは

getElementById()は、HTMLの要素を取得することができるメソッドです。

document.getElementById(id名)

取得したHTMLの要素

・HTML

<p id="hello"></p>

・JavaScript

let hello = document.getElementById("hello");
hello.textContent = "Hello!";

この例では、HTMLのid名を「hello」で指定した<p>要素をgetElementById()で取得し、それを変数「hello」に代入しています。
そして、その要素にtextContentプロパティを用いることで、テキストを代入するという内容ですね。

では結果を見てみると

こうですね。
「Result」タブを選択すると「Hello!」と表示されますね。

このように、getElementById()を用いることで、指定したid名をもつHTML要素を取得することができます。