DOM とは

Document Object Model( DOM )とは、HTML や XML を、スプリクトやプログラム言語から利用する仕組みです。ドキュメントを構造的に表現し、ドキュメントの内容や表示形態の変更を可能にしています。W3C から Document Object Model Technical Reports として勧告されれています。JavaScript だけでなく、いろいろな言語でこの仕組みを使うことができます。DOM の仕様は、レベル1からレベル3まで定義されていますが、あまり意識する必要はないでしょう。
DOM Scripting は、Web 標準に準拠した DOM を使ってドキュメントにアクセスすることです。

JavaScript を HTML から完全に分離する

DOM を使うと、HTML から JavaScript を完全に独立させることができます。
本サイトでは、理解しやすいようサンプルの JavaScript 記述を HTML 内に書くことが多々ありますが、本サイトの記述は、基本的に HTML から JavaScript を完全に独立させています。
HTML から JavaScript を完全に独立させたサンプルをおきますので、実感してください。
サンプル: DOM で JavaScript を完全に独立

DOM で JavaScript を完全に独立のサンプルソースコード

次は、JavaScript の記述を全く無くした HTML ファイルです。
外部 JavaScript ファイルを読み込む記述以外は、JavaScript に関する記載は一切ありません。このサンプルでは、外部 JavaScript では、id 要素を頼りにスクリプトを実行します。

js_dom.html のソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta http-equiv="content-style-type" content="text/css">
<script type="text/javascript" src="js_dom.js"></script>
<title>JavaScript DOM のテスト</title>
</head>
<body>
JavaScript DOM のテスト<br>
<br>
<span id='dom1'>dom1</span> の色を変えます<br>
 ↑ クリック<br>
<br>
<span id='dom2'>dom2</span> の文字を変えます<br>
 ↑ クリック<br>
</body>
</html>

外部 JavaScript のファイルです。
window.onload で、id 要素、dom1 と dom2 がクリックされたら、指定の関数が実行されるようセットしています。関数 f_dom1() は、スタイルシートの color プロパティの値を変えることで、色を変えます。関数 f_dom2() は、文字の値を置き換えます。
JavaScript を使うと、クリックしても、ページはリロードされずに表示が変更されたことに気づきましたか?
他にも、いろいろなことができます。

js_dom.js のソースコード

//JavaScript DOMのテスト

function f_dom1() {
    //dom1 がクリックされたら色を変更
    document.getElementById('dom1').style.color="red";
}

function f_dom2(){
    //dom2 がクリックされたら文字を変更
    document.getElementById('dom2').firstChild.nodeValue="dom_change";
}

//ページが読み込まれたらイベントをセットする
window.onload = function(){
    document.getElementById('dom1').onclick=f_dom1;
    document.getElementById('dom2').onclick=f_dom2;
}

スポンサード リンク

このページは 

トップページ > JavaScript > DOM