JavaScriptからHTMLやCSSを変更する方法/getElementById()メソッドの使い方

あらかじめHTMLでボタンや画像に任意のID等を付けておいて、それをJavaScriptで読み取ることでJavaScriptとHTML/CSSの橋渡しをすることができます。

document.getElementById()メソッドの使い方

まずはHTMLで何でもいいのでIDを付けておきます。

divタグにIDを設定
<div id=”example_id”></div>
※example_id部分はID名につき任意

上のコードでは、IDが”example_id”となっています。これはdivを特定するためのIDであってdivの内容ではありません。変更したいのはdiv要素のIDではなくdiv要素の中身ですが、JavaScriptから直接「divの中身を編集する」と命令することはできません。編集するためには、IDが付いた内容（divタグの中身）を別の変数に読み替えて、その変数を編集する必要があります。

HTMLのIDを取得して変数に代入
変数名 = document.getElementById(‘要素のID’);

documentオブジェクトというのはそのページ全体のことで、documentの中で指定したIDを検索しています。getElementByIdメソッドはdocumentオブジェクトにのみ使用可能です。pでもimgでもh2でも、IDさえ付いていれば好きなタグを取得することができます。
取得できる対象がない場合はnullが返されます。



<div id="example_id"></div>

//JavaScript
js_id = document.getElementById("example_id");

変数「js_id」には、ID「examole_id」を使用するdiv要素の中身が代入されました。
この記事ではテキストの出力に、下記のメソッドを使っています。

HTMLに変更を加える
オブジェクト.innerHTML = “内容”;

実際にやってみましょう。まず、↓ここに、JavaScriptの文字列を表示するためのdiv（<div id=”examole_id”></div>）を配置しておきます。

そしてonclick=”ButtonClick();”を設定したを押すことで、JavaScriptがdivのIDを読み取って変数へ代入し、変数に対してinnerHTMLで文字列の変更を指示します。
実際に使用しているコードは次のようになります（Scriptは省略）。

 function ButtonClick() {
            js_id = document.getElementById("example_id");
            js_id.innerHTML = "JavaScriptでHTMLに出力";
}

ひとつのHTMLに複数の同じIDが存在する場合は、動作は保障の限りではありません。余計な間違いを避けるために名前はかぶりにくいものにし、ひとつのHTMLに同じIDが重複しないようにしましょう。

JavaScriptの使い方・メソッド・プロパティまとめ

HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。