ドキュメントオブジェクトモデル(DOM)

[up] [prev] [next]

一覧

appendChild(), childNodes, createElement(), firstChild , getElementById(), getElementsByClassName(), getElementsByName(), getElementsByTagName(), lastChild, nextSibling, parentNode, previousSibling, querySelector()

DOMとは

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

要素(エレメント)を参照する

document.getElementById(id) (D1/e5/N6/O6)

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

JavaScript
oElement = document.getElementById("id1");
element.getElementsByTagName(tagName) (D1/e5/N6/O6)

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

JavaScript
oElements = document.getElementsByTagName("span");
oElements = oElement.getElementsByTagName("span");
element.getElementsByClassName(className) (e9/Fx3/Ch/Ed/Op/Sa)

className で指定したクラス名が指定された要素リストを参照します。

JavaScript
oElements = document.getElementsByClassName("namae");
oElements = oElement.getElementsByClassName("namae");
element.getElementsByName(name) (D1/e5/N6/O6)

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

JavaScript
oElements = document.getElementsByName("namae");
oElements = oElement.getElementsByName("namae");
element.querySelector(selector) (e8/Ch1/Fx3.5/Ed/Op10/Sa3.2)

selector で指定したセレクタに合致する要素リストを参照します。

JavaScript
oElements = document.querySelector("#id123");
oElements = oElement.querySelector("#id123");
element.childNodes
element.parentNode
element.firstChild
element.lastChild
element.previousSibling
element.nextSibling

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

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

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

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

JavaScript
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

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

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

要素内の文字を参照する

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

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

属性を参照・設定する

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

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

JavaScript
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属性を設定しています。

JavaScript
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/×

要素を作る

◆ document.createElement(tagName) (e5/N6)
element.appendChild(element) (e5/N6)

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

HTML
<script>
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()">

参考文献


[up] [prev] [next]
Copyright (C) 2003-2018 杜甫々
初版:2003年6月21日、最終更新:2018年4月29日
http://www.tohoho-web.com/js/dom.htm