仕事でJavaScriptからDOMを通してHTMLを操作したことはあったけど、今回改めて勉強したのでメモしておく。

DOMとは

DOMとは、「Document Object Model」の略である。プログラムから「HTML 文書」や「XML 文書」を利用するための、標準化された仕様を指す。
DOMが生まれた背景として、JavaScriptのようなクライアント側のプログラムを使ってHTMLの内容を動的に変化させる「ダイナミックHTML」という概念の登場がある。登場初期の頃はブラウザごとに制御方法が違っていたので、ブラウザごとに専用のJavaScriptのコードを用意する必要があったが、それが煩わしかったので、制御方法を統一するためにDOMという仕様が生まれた。

DOMを構成するもの

HTML文書は、「タグ」「属性」「値」「文書」などの部品で構成されている。この部品のことをノードと呼ぶ。HTML文書がブラウザに読み込まれると、JavaScript 内でこれらの部品が「DOMオブジェクト」として自動的に生成される。
この「DOMオブジェクト」から、メソッドやプロパティを利用する事が出来、メソッドやプロパティを通してHTMLを操作する。

ノードとは

ノードとは、節、結節（点）、節点、交点、中心点、集合点、こぶ、膨らみ、などの意味を持つ英単語。ネットワークや木構造など、複数の要素が結びついてできた構造体において、個々の要素のことをノードという。
HTMLでは、開始タグと終了タグの間に別のタグを挟み込むと、タグをネスト（入れ子）にすることが出来るが、これを行うとタグ間で木構造の親子関係を構築することが出来る。今回の場合は「タグ」「属性」「値」「文書」といったものがノードに当たる。

ノードの種類について

「DOMオブジェクト」であれば、共通して利用できる基本的な機能として、Nodeというインターフェースが定められている。「Nodeインターフェース」から派生して、12種類のインターフェースが用意されているが、主に利用するインターフェースは以下の4つである。

インターフェース解説
Documentドキュメント、階層のルートに相当
Elementエレメント、要素に相当
Attrアトリビュート、属性に相当
Textテキストノード、タグ以外の文字データに相当

Windowオブジェクトとは

Windowオブジェクトとは、ブラウザそのものの情報を保持しているオブジェクトである。例えば、ブラウザの高さのプロパティ（outerHeight）、ブラウザの幅のプロパティ（outerWidth）、アクセスしている位置情報(Location)、閲覧しているHTMLの情報（Document）などを保持している。

Documentオブジェクトとは

現在閲覧しているHTML自体を保持しているオブジェクトである。DocumentオブジェクトはWindowオブジェクトに内包されている。DOM（document Object Model）では、documentオブジェクトを通して、個々の要素を取得・操作することが出来る。

データの取得方法

以下の表のメソッドを使用することでデータの取得を行うことが出来る。

メソッド名解説
getElementByIdIDをキーにして要素を操作する。
getElementsByClassNameクラス名をキーにして要素を操作する。
getElementsByTagNameタグ名をキーにして要素を操作する。
　

記述例

document.getElementById("ttl");

document.getElementsByClassName("student");

document.getElementsByTagName("h1");

サンプル

処理ボタンをクリックすると、アラートで「成績表」と表示する。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
function htmlChange() {
    var h1;
    h1 = document.getElementById("ttl").innerHTML;
    alert(h1);
}
</script>
<div id="ttl_box">
    <h1 id="ttl">成績表</h1>
</div>
<table id="tbl">
    <tr>
        <th>名前</th>
        <th>成績</th>
    </tr>
    <tr>
        <td class="student">田中</td>
        <td class="score">100</td>
    </tr>
    <tr>
        <td class="student">山本</td>
        <td class="score">90</td>
    </tr>
    <tr>
        <td class="student">小山</td>
        <td class="score">70</td>
    </tr>
    <tr>
        <td class="student">大木</td>
        <td class="score">85</td>
    </tr>
</table>
<div id="add"></div>
<input type="button" value="処理" onclick="htmlChange()" />

要素の追加・削除方法

以下の表のメソッドを使用することで要素の追加と削除を行うことが出来る。

メソッド名解説
createElement要素を追加する。引数として、追加するタグの名前を指定する。
createTextNodeタグの中に含まれるテキスト部分を作成する。
appendChild子要素として追加する。
removeChild子要素を削除する。
deleteRowテーブルの要素を削除する。
　

サンプル

処理ボタンをクリックすると、<strong>平均は86.25点です</strong>を<div id=”add”></div>の子要素として追加し、<div id=”ttl_box”></div>の子要素の<h1 id=”ttl”>成績表</h1>を削除する。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
function htmlChange() {
    var heikin;
    heikin = document.createElement('strong');
    var text;
    text = document.createTextNode('平均は86.25点です');
    heikin.appendChild(text);
    var add;
    add = document.getElementById("add");
    add.appendChild(heikin);
    ttlBox = document.getElementById("ttl_box");
    ttlBox.removeChild(ttlBox.lastChild);
}
</script>
<div id="ttl_box">
    <h1 id="ttl">成績表</h1>
</div>
<table id="tbl">
    <tr>
        <th>名前</th>
        <th>成績</th>
    </tr>
    <tr>
        <td class="student">田中</td>
        <td class="score">100</td>
    </tr>
    <tr>
        <td class="student">山本</td>
        <td class="score">90</td>
    </tr>
    <tr>
        <td class="student">小山</td>
        <td class="score">70</td>
    </tr>
    <tr>
        <td class="student">大木</td>
        <td class="score">85</td>
    </tr>
</table>
<div id="add"></div>
<input type="button" value="処理" onclick="htmlChange()" />

CSSを操作する

CSSを変更するには、styleプロパティを利用する。

記述例

document.getElementById("ttl").style.color = "red";

document.getElementById("ttl").style.borderBottom = "solid 3px #ccc";

document.getElementById("ttl").style.backgroundColor = "#FFFFCC";

document.getElementById("ttl").style.fontSize = "3em";

参考
JavaScriptプログラミング講座【ドキュメントオブジェクトモデル(DOM)について】
JavaScriptでDOMを操作する方法【初心者向け】
ノードとは｜node – 意味/定義 ： IT用語辞典