getElementById()の使い方について【JavaScript】

JavaScript

 

今回は、「getElementById()」の使い方について。

JavaScriptでは、よく使うメソッドです。

 

getElementById()とは?

「getElementById()」とは、指定したidを持つ要素を1つ取得するメソッド。

複数のid要素を、一度に複数取得することはできないので注意が必要です。

 

getElementById()を使ってプログラミングをしよう

「getElementById()」を使って、実際にプログラムを書いて見ましょう。

まずは、HTMLのコードから。

<p id="text"></p>

 

空のpタグに「text」クラスをつけました。

そして、次はJavaScriptのコードです。

document.getElementById('text').innerHTML = 'おはよう!';

 

「getElementById()」でHTMLにある「text」クラスの要素を取得。

次に、「.innerHTML」のメソッドを使って、空のpタグに「おはよう!」といった文字を入れるプログラムを書きました。

 

すると、ブラウザに「おはよう!」と文字が表示されましたね。

 

これが、「getElementById()」のメソッドの使い方でした。

 

まとめ

「getElementById()」はJavaScriptのDOM操作をする際によく使うので、是非理解しておきたいところですね。