ここではJavaScriptのメソッド「getElementById」の使い方を紹介します。
ダイレクトアクスのためのメソッドの中でも、一番簡単にノードが取得できるので使う機会も多いはず。
簡単に特徴を説明した後、実際のコードで使い方を見ていきたいと思います！
「getElementById」って何？
getElementByIdは、あらかじめHTMLタグに割り振っておいたidの情報を取得し、何らかの処理をする際に使います。
例えば、指定したidのついたHTMLタグの中にテキストを組み込んだり、逆に要素の情報を取得して他のプログラムに使用したり…。
つまり、JavaScriptのgetElementByIdを使いこなすことで、単純なHTMLだけでは作れない動的なサイトを作ることができるんです。
getElementByIdは、いわばその動きをつけるための起点のようなもの。
このメソッド1つで特定のHTMLタグ要素を扱うことができるので、使いどころは何かと多いです。覚えておくと便利というか絶対使うことになるでしょうね。
簡単に特定のノードを取得できる「ダイレクトアクセス」
HTMLで記述したドキュメントに含まれる「要素」「属性」「テキスト」などの情報は、JavaScriptでは全部ひっくるめて「ノード」という名前で呼ばれています。
このノードを簡単に取得できるのがgetElementByIdということになります。
ちなみに、ノードを「オブジェクト（もの）」としてプログラムを形成するJavaScriptの基本的な考え方は、下記の記事にまとめてあります。要チェックです！
ダイレクトアクセスのためのメソッド
ノードを取得する方法はいくつもあるんですが、中でもgetElementByIdのように直接要素を指定する方法を「ダイレクトアクセス」と呼びます。
getElementById以外にもダイレクトアクセスが出来るメソッドがあるので、ここで参考程度に紹介しておきます。
| メソッド | 意味 |
| getElementById(id) | 指定されたid名が割り振られた要素を取得 |
| getElementByClassName(class) | 指定されたclass名が割り振られた要素全てを配列で取得 |
| getElementByTagName(name) | 指定されたnameが割り振られた要素を全てを配列で取得 |
「class」や「name」はidと違ってHTML内に複数存在するので、そのすべてを配列として取得します。
配列は扱いがちょっと難しいので、最初の内はgetElementByIdを使ってピンポイントにノードを取得することから始めてみましょう。
getElementByIdの使い方
ここからは実際の使い方です。
まずは、getElementByIdをつかってノードを取得する基本形を覚えましょう。
document.getElementById("id名")id名の箇所には、対称となるHTMLタグにつけておいたid名を入れてください。
ちなみに「document」はブラウザオブジェクトと言ってコンテンツ部分のことを指しています。
2つを合わせて「ブラウザのコンテンツ部分にある、特定のid名がついた要素の情報を取得」と考えると分かりやすいですね。
といっても、基本的にはこの形をそのまま覚えておけばOKです。そのまま使えますから。
実際にgetElementByIdを使ってみる
基本形を見たところで、次は実際のコードを見ながら使い方を確認してみましょう。
ここで感覚を掴んでみてください。
【実例その１】要素内にテキストを出力
<p id="text"></p>
<script>
document.getElementById("text").innerHTML = "JavaScriptでテキストを出力しました";
</script>
これは、空の要素「#text」内にJavaScriptを使ってテキストを埋め込むコードです。
ブラウザ上では「JavaScriptでテキストを出力しました」という文字が出力されます。
ちなみに「innerHTML」はHTMLの要素内にテキストを組み込む時に使われるプロパティ。つまりここでは、document内の「#text」に対して実行していることになりますね。
こんな感じに、getElementByIdでHTML要素を指定することで、プロパティを使って動的にテキストを組み込むことが出来ます。
【実例その２】要素内の値（情報）を取得して扱う
<form method=”post” action="">
<input id="checbox1" type="checkbox" value="値１">
<input id="checbox2" type="checkbox" value="値２">
</form>
<script>
document.getElementById("checbox1").value;
var checkbox1 = document.getElementById("checbox1").value;
</script>このコードでは、HTML上で設置したチェックボックスの値を取得し、変数に格納するまでが記述されています。
「#checbox1」の値を「value」プロパティを使って取得し変数に格納したので、あとは自由に値を扱うだけです。
この通り、ユーザーが入力した値もgetElementByIdを起点とすることで取得できます。
もちろん取得したデータはブラウザに出力したり、そのデータを別の操作に利用することもできますよ。
これはかなり使えます。変則的な値を扱う時こそ力が発揮されますね。
getElementByIdは、JavaScriptで動的サイトを作るための起点となる大事なポイント。
ぜひ覚えておきたいです！
