JavaScriptでHTMLを操作する方法のうち最も基本的なものに「getElementById」という、HTML要素を取得するメソッドがあります。getElementByIdを使用することで取得した要素の内容やスタイルを変更するのが容易になるなど、役立つ場面も多いです。本記事では、JavaScript学習者向けにgetElementByIdの使い方をソースコードを用いて解説します。
getElementByIdとは
getElementByIdとは、HTMLタグで指定したID値を持つHTML要素を取得するメソッドです。任意の要素を抽出して、HTMLを書き換えたりスタイルを変更するといったことができます。要素のIDは基本的に、”一意である”ことが求められるので、特定の要素に素早くアクセスする場合に有効です。
IDに関するルール
IDはHTML要素に付けられた識別子のことであり、基本的に同一HTML内で重複してはならず、一意な値である必要があります。また、getElementByIdメソッドで取得できる要素は一つであるため、複数の要素が同じIDを持つ場合（同一HTML内で重複IDが存在する）は、最初に一致した要素だけを返します。また、指定したIDが存在しない場合はNULL値を返します。
ちなみに、IDを持たない要素にアクセスする場合は、querySelector()メソッドを使うことで任意のセレクタで要素を検索できます。
【使用イメージ】
document.getElementById(id)「getElementById」を「getElementByID」としてしまうと、メソッドとして機能しないので注意が必要です。
【引数】
引数には取得したい要素のID値を記述します。なお、ID値の文字列は大文字と小文字とで区別されます。
（例）’example’
【戻り値】
ID値（id属性で指定された文字列）に一致する要素を返します。HTML内に一致する要素がない場合はNULL値を返します。
getElementByIdの使い方
【例1】要素を取得する
段落タグをIDで要素を取得し、JavaScriptコンソールに表示させます。
【実行コード】
<html>
<body>
<p id="sample">こんにちは</p>
<script>
console.log(document.getElementById("sample"));
</script>
</body>
</html>【実行結果】
<p id=”sample”>こんにちは</p>
ちなみに、JavaScriptで取得する場合は次のように記述します。
let element = document.getElementById("sample");【例2】要素のテキスト部分を取得する
段落タグをIDで要素を取得し、textContentプロパティで要素の中身であるテキスト部分をJavaScriptコンソールに表示させます。
【実行コード】
<html>
<body>
<p id="sample">こんにちは</p>
<script>
console.log(document.getElementById("sample").textContent);
</script>
</body>
</html>【実行結果】
こんにちは
【例3】変数でIDを指定する
引数を文字列ではなく、変数で指定します。
【実行コード】
<html>
<body>
<p id="sample">こんにちは</p>
<script>
var id="sample";
console.log(document.getElementById(id));
</script>
</body>
</html>【実行結果】
<p id=”sample”>こんにちは</p>
変数「id」に段落タグのID名「sample」が格納されています。そのため、変数をgetElementByIdの引数に指定することで段落タグ要素が表示されます。
【例4】要素の中身を変更する
innerHTMLプロパティを使用することで要素の中身を変更できます。
【実行コード】
<html>
<body>
<p id="sample">こんにちは</p>
<input type="button" value="クリック" onclick="fnc()">
<script>
const smp = document.getElementById("sample");
function fnc() {
smp.innerHTML = "こんばんは";
}
</script>
</body>
<html>【実行結果】
ボタンをクリックすると段落タグ内の文字列が変更されます。
【例5】valueの値を取得する
valueプロパティを使うことでvalueの値を取得できます。
ボタンに書かれた文字を取得します。
【実行コード】
<html>
<body>
<p>クリックしましょう</p>
<input type="button" id="sample" value="クリック">
<script>
console.log(document.getElementById("sample").value);
</script>
</body>
</html>【実行結果】
クリック
【例6】イベントハンドラーを結びつける
getElementByIdで取得した要素に、イベントハンドラーを結びつけることも可能です。たとえば、ボタンをクリックすると、特定の関数を発動する仕組みなどを作成できます。
ボタンの文字列が変わるようにします。
【実行コード】
<html>
<body>
<p>クリックしましょう</p>
<input type="button" id="sample" value="クリック">
<script>
const btn = document.getElementById("sample");
function fnc() {
btn.value = " 済 ";
}
btn.setAttribute("onclick", "fnc()");
</script>
</body>
</html>【実行結果】
ボタンをクリックするとボタンに書かれた文字が変更されます。
【例7】スタイルを変更する
styleプロパティを使うことでテキストの色やサイズを変更できます。
【実行コード】
<html>
<body>
<p id="sample">こんにちは</p>
<button onclick="myFunction()">クリック</button>
<script>
const smp = document.getElementById("sample");
function myFunction() {
smp.style.color="red";
}
</script>
</body>
</html>【実行結果】
ボタンをクリックするとテキストの色が変更されます。
JavaScriptの勉強方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
