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");
className で指定したクラス名が指定された要素リストを参照します。
oElements = document.getElementsByClassName("namae");
oElements = oElement.getElementsByClassName("namae");
name 属性で指定した名前で要素リストを参照します。
oElements = document.getElementsByName("namae");
oElements = oElement.getElementsByName("namae");
selector で指定したセレクタに合致する要素を参照します。複数マッチする場合は最初の要素を参照します。
oElements = document.querySelector("#id123");
oElements = oElement.querySelector(".msgbox");
selector で指定したセレクタに合致する要素のリストを参照します。
oElements = document.querySelectorAll("#id123");
oElements = oElement.querySelectorAll(".msgbox");
ある要素の親要素や子要素などを参照します。
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 (var i = 0; i < oElements.length; i++) {
oElement = oElements[i];
:
}
getElementsXxxx() で取得する要素リストを forEach() でループさせるには Array.from() で配列に変換します。
var oElementArray = Array.from(document.getElementsByTagName("h4"));
oElementArray.forEach((oElement) => {
console.log(oElement.innerHTML);
});
querySelectorAll() で取得する要素リストの場合は Array.from() 無しで forEach() することができます。
var oElements = document.querySelectorAll("h4");
oElements.forEach((oElement) => {
console.log(oElement.innerHTML);
});
要素内のテキスト部分を参照するには次のようにします。
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>
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()">