getElementById

Webページ（HTML文書）は、タグで指定された要素（element）の階層的な集まりである。これらの要素を操作する取り決めであるDOM(Document Object Model)を使って、webページの要素をJavaScriptで操作してみよう。

id属性

CSSでも使用するが、タグで指定されたwebページの要素のid属性で値を指定することで、要素にid（識別子）を設定することができ、各要素をidで区別することができるようになる。 up_to.htmlサンプルでは、「参議院議員選挙まで、あと<span id="days">○</span>日です。」のspan要素にdaysというidを設定している。

<h1>参議院議員選挙まで、あと<span id="days">○</span>日です。</h1>

イベントハンドラー

マウスポインターを重ねるとか、クリックするといったイベントが発生したときに行う処理を指定するのが、イベントハンドラーである。（※同じ要素に同じイベントハンドラーで複数定義したい場合は、インラインではない方法を使わないといけないことに注意する必要がある。）イベントハンドラーをタグ要素の属性として、値にJavaScriptの関数などの処理を指定する。 onclick.htmlサンプルでは、以下のイベントハンドラーを重複して指定している。

<h2 onClick="change_text(this)" onMouseOut="recover_text(this)">ここをクリックしてください。</h2>

getElementById()関数

JavaScriptからidを付けたwebページの要素を取得して使用するための関数である。Webページは、documentというオブジェクトにデフォルトでなっているので、そのメソッドとしてgetElementById()があり、要素のidを引数に指定して実行することで、下の例ではobjという変数にその要素が格納され、その要素のプロパティやメソッドを使用することができるようになる。

var obj = document.getElementById(ID);

up_to.htmlサンプルでは、取得した要素の内容のテキストデータを参照するプロパティであるinnerHTMLを使用している。

var elmnt = document.getElementById("days");
elmnt.innerHTML = diff;

【お詫び】「up_to.htmlサンプルでは、取得した要素の内容のテキストデータを参照するプロパティであるinnerTextを使用している。」としていましたが、innerTextプロパティはブラウザに依存したプロパティで、innerHTMLプロパティを使用するべきでした。また、タグも使えるinnerHTMLを使う方が普通でした。

var elmnt = document.getElementById("days");
elmnt.innerText = diff;          // IE用 (Firefox 47.0では動作した）
elmnt.textContent = diff;        // Firefox用

DOMによるwebページの要素の操作

id属性

イベントハンドラー

getElementById()関数