ドキュメントオブジェクトモデル（DOM）

DOM は Document Object Model の略です。HTML や XML で記述された各要素を取り扱うための標準インタフェースとして1998年に W3C によって勧告されました。仕様のコアとなる部分は特定の言語には依存しない形式で定義され、追加として、JavaScript などの言語へのマッピングが紹介されています。IE の document.all による DHTML や Netscape 4.* のレイヤに代わる機能として、IE5.0、Netscape 6.0 が DOM をサポートしています。ここでは、DOM の主な機能のみを紹介します。

■ 要素（エレメント）を参照する

id 属性で指定した名前で要素を参照します。

oElement = document.getElementById("id1");

タグ名から要素リストを参照します。

oElements = document.getElementsByTagName("span");
oElements = oElement.getElementsByTagName("span");

name 属性で指定した名前で要素リストを参照します。

oElements = document.getElementsByName("namae");
oElements = oElement.getElementsByName("namae");

ある要素の親要素や子要素などを参照します。

oElements = oElement.childNodes;         // 子要素リスト
oElement = oElement.parentNode;          // 親要素
oElement = oElement.firstChild;          // 長子要素
oElement = oElement.lastChild;           // 末子要素
oElement = oElement.previousSibling;     // 兄姉要素
oElement = oElement.nextSibling;         // 弟妹要素

■ 要素リストから要素を取り出す

要素リストから要素を取り出すには下記のようにします。id1 は、要素の id属性で指定した名前です。

n = oElements.length;                       // D1/e5/N6/O6
oElement = oElements[0];                    // －/e5/N6/O6
oElement = oElements(0);                    // －/e5/×/O6
oElement = oElements.id1;                   // －/e5/N6/O6
oElement = oElements.item(0);               // D1/e5/N6/O6
oElement = oElements.item("id1");           // －/e5/N6/O6
oElement = oElements.namedItem("id1");      // D1/e5/N6/O6
oElements = oElements.tags("span");         // －/e5/×/O6

要素リストのひとつひとつについて処理する場合は次のようにします。

for (i = 0; i < oElements.length; i++) {
    oElement = oElements[i];
       :
}

■ 要素内の文字を参照する

要素内のテキスト部分を参照するには次のようにします。

sStr = oElement.firstChild.nodeValue;       // D1/e5/N6/×
sStr = oElement.innerText;                  // ×/e5/×/×
sStr = oElement.innerHTML;                  // ×/e5/N6/×

■ 属性を参照・設定する

◆ 要素の属性値を参照する

要素の属性値を参照するには次のような方法があります。例では、要素の id属性を参照しています。

value = oElement.id;                                      // D1/e5/N6/O6
value = oElement.getAttribute("ID");                      // D1/e5/N6/O6
value = oElement.getAttributeNode("ID").value;            // D1/e6/N6/×
value = oElement.getAttributeNode("ID").nodeValue;        // D1/e6/N6/×
value = oElement.attributes.getNamedItem("ID").value;     // D1/e6/N6/×
value = oElement.attributes.getNamedItem("ID").nodeValue; // D1/e6/N6/×

◆ 属性値を設定する

要素の属性値を設定するには次のような方法があります。例では、要素の id属性を設定しています。

oElement.id = value;                                      // D1/e5/N6/×
oElement.setAttribute("ID", value);                       // D1/e5/N6/×
oElement.getAttributeNode("ID").value = value;            // D1/e6/N6/×
oElement.getAttributeNode("ID").nodeValue = value;        // D1/e6/N6/×
oElement.attributes.getNamedItem("ID").value = value;     // D1/e6/N6/×
oElement.attributes.getNamedItem("ID").nodeValue = value; // D1/e6/N6/×
oElement.setAttributeNode(oAttr);                         // D1/e6/N6/×

■ 要素を作る

createElement() は要素を新しく作成ます。appendChild() は、作成した要素を子要素として追加します。

<script type="text/javascript">
<!--
function func() {
    var oImg = document.createElement('img');
    oImg.setAttribute("src", "xxx.gif");
    var oDiv = document.getElementById("id123");
    oDiv.appendChild(oImg);
}
// -->
</script>
<div id="id123"></div>
<input type="button" value="OK" onclick="func()">