DOMとは

広告

DOMとはDocument Object Modelの略でHTMLやXML文書を取り扱うためのAPIです。

DOMではHTMLやXML文書をノードと呼ばれるものの階層的な構造として識別します。そしてJavaScriptなど様々なプログラミング言語やスクリプトから、扱いたいノードを特定し操作できるようにする仕組みを提供してくれます。

JavaScriptはクライアント側のブラウザ上で動作しますので、JavaScriptからDOMを利用するにはブラウザでもDOMを扱えるようになっている必要があります。ただ現状ではほとんど全てのブラウザでデフォルトでDOMを扱えるようになっていますので特別なにかをする必要はありません。

サンプルコード

では簡単なサンプルでDOMがどのような使い方をするのかを確認しておきます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="./js/script1_1.js">
</script>

<title>JavaScript テスト</title>
</head>
<body>

<div id="sample">ここが変更されます</div>

<form>
<input type="button" value="変更" onClick="change()">
</form>

</body>
</html>

function change(){
    var val = document.getElementById("sample").innerHTML = "変更されました";
}

上記ではページ内のボタンをクリックするとHTMLページ内の特定の箇所の中身を書き換えます。その特定の箇所を指定するのにDOMが使われています。

では実際にブラウザで表示させてみます。

p1-1

表示されているボタンをクリックして下さい。次のようにHTMLページの一部が書き換えられます。

p1-2

( Written by Tatsuo Ikura )