DOM : JavaScript

Tweet

Pocket

DOMについてどら猫本舗のリファレンスカウンター DOMとは何かより引用します。

DOMとは、HTML文書およびXML文書のためのアプリケーション=プログラミング=インターフェイス(API)である。これは、文書の論理的構造や、文書へのアクセスや操作の方法を定義するものである。

参考サイト:http://www.doraneko.org/misc/dom10/19981001/introduction.html

DOMはHTMLやXMLの構成要素をツリー構造のオブジェクトとして表したものであり、JavaScriptではDOMを介してHTMLやXMLの各要素(実際は要素に限らず属性やテキストなどすべて)にアクセスることができます。
DOMではHTMLやXMLを構成するものをノードと呼び３つに分類しています。

要素ノード(element node)

HTMLやXMLの要素に対応するノード

テキストノード(text node)

テキストに対応するノード

属性ノード(attribute node)

属性に対応するノード

DOMを使ったJavascriptの簡単な例

<script type="text/javascript">
	var p1 = document.getElementById('p1');
	p1.style.fontsize = '1.5em';
	var p2 = document.getElementById('p2');
	p2.style.fontsize = '2em';
</script>
<p id="p1">パラグラフ1</p>
<p id="p2">パラグラフ2</p>

getElementByIdメソッドでid属性により識別されたHTML要素に対応するノード(オブジェクト)を取得し操作します。上記のJavaScriptではフォントサイズを操作しています。