JavaScriptからのHTML要素アクセス
Webページの(X)HTMLに動的にアクセスして、Webページの内容を取得したり書き換えたい。
そんな時には、JavaScriptに実装されているDOM（Document Object Model）を使ってみましょう。DOMは、XMLやHTMLにプログラムからアクセスするためのオブジェクト（APIやデータ構造の集まり）で、Webページの各HTML要素にアクセスしたりHTML要素を追加するためのAPIも用意されています。
Webブラウザに搭載されているJavaScriptにもDOMが実装されているので、JavaScriptのコードでWebページ内のHTML要素を操作することができるわけです。
DOMからアクセスするHTML要素には、idやname属性で「DOMから識別できる固有の識別子、名前」を付けておきます。
たとえば、下の「span要素」という文字列は、「dom_access_1」というidを付けたspan要素です（スタイルシートでフォントサイズを大きくし、ボーダーを付けています）。
span要素
<span id="dom_access_1" style="border: 1px solid; font-size: larger; padding: 4px;">span要素</span>こうしてidをつけた要素は、HTMLドキュメント全体を保持するdocumentオブジェクトにある指定idの要素を取得するgetElementById()で参照を取得できるようになります。
たとえば、先のspan要素dom_access_1の参照を取得し、その中身（innerHTML）を表示してみましょう。
var elm = document.getElementById("dom_access_1");
document.write(elm.innerHTML);実行結果
innerHTMLには、値を設定することもできます。innerHTMLは、開始・終了タグの間のHTML、つまり表示されるHTML要素なら「表示内容そのもの」ですので、JavaScriptでWebページ内のHTML要素を取得しそのinnerHTMLを変更すれば動的にWebページの表示内容を書き換えられるわけです。
たとえば、ボタンのクリック時イベントハンドラとして以下のようなJavaScriptを仕込んでおくと……
<button onclick="document.getElementById('dom_access_1').innerHTML='クリックでinnerHTML変更'">テスト</button>ボタンをクリックしてonclickに設定されているJavaScriptを実行すると、上の「span要素」の文字列が変更されましたね。また、文字列が変更された後にリロードすると（スクリプトで変更したinnerHTMLが再び初期化され）元の文字列に戻ることも確認しておきましょう。
JavaScriptで、HTML要素を取得・操作できるようになると、状況や閲覧者の操作に応じてWebページの表示内容を変更することができるようになります。ただし、あまり複雑な書き換えを繰り返すと、現在の表示と（最初のHTMLに変更を加えた）HTMLコードの対応がわかりにくくなってデバッグで苦労するかもしれませんが……