DOMの概要と基本操作 - web-0127のブログ

DOM Scriptingとは

JavaScriptによるDOM(Document Object Model)を使った開発手法です。

DOM Scripting

JavaScript（Javaではありません）によって標準に準拠したDOMを使いHTML+CSSに対してアクセスします。

テーブルレイアウトのサイトはこのDOMを使った処理に向いていません
セル中の要素にid属性などによる識別が複雑になってしまうからです

Web標準のメリットを活かす

HTML：文書構造、意味を定義
CSS：レイアウト、見た目を設定
JavaScript：動作、振る舞いを追加

JavaScriptの文法

命令文の最後は「セミコロン」をつける

命令文１;
命令文２;

複数の命令文を１行に記述することもできます

命令文１;  命令文２;

引数は命令に渡すパラメータです

命令の名前（引数）;

スクリプトを記述する場所

HTMLの要素内に直接記述する
script要素を使い記述する
外部ファイルに記述して読み込む

DOMによる要素の指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMによる要素の指定例</title>
</head>
<body>
<h1 id="myid">DOMによる要素の指定</h1>
<script>
	alert ( document.getElementById( 'myid' ) );
</script>
</body>
</html>

実行するタイミング

DOMとダイナミックHTML

ドキュメント内の任意の要素にアクセスする仕組みのことを「Document Object Model」と呼びます
DOMは、W3Cという標準化団体で規定された仕組みで、JavaScriptにはDOMを操作するメソッドが用意されています
DOMを利用してHTML内の要素を動的に変更することを「ダイナミックHTML（DHTML）」と呼びます

《おみくじプログラム》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMによるおみくじ</title>
<style>
body, div, h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
}
body {
  font-size: 16px;
  text-align: center;
  background-color: #FFF;
  padding-top: 50px;
}
#myArea {
  background: #F0F0F0;
  margin: 0 auto;
  width: 600px;
  line-height: 120px;
}
#myArea h1 {
  font-size: 36px;
  color: #390;
}
#myArea h1.today {
  color: #000;
}
#myArea h4 {
  color: #F00;
}
</style>
</head>
<body>
<h1>今日の運勢</h1>
<form>
<p>
<input type="button" value="占う" onClick="unsei();">
</p>
</form>
<div id="myArea">
<h1 class="today">今日はどんな運勢でしょう？</h1>
</div>
<script>
var kuji = new Array(4);
kuji[0] = '<h1>大吉</h1>';
kuji[1] = '<h2>中吉</h2>';
kuji[2] = '<h3>小吉</h3>';
kuji[3] = '<h4>凶</h4>';

function unsei(){
	var myArea = document.getElementById('myArea');
	var num = Math.floor(kuji.length * Math.random());
	myArea.innerHTML = kuji[num];
}
</script>
</body>
</html>

要素数が４の配列「kuji」を生成する
各要素におみくじのテキストを代入する
「unsei」関数を定義する
ID名「myArea」のdiv要素におみくじを表示する
フォーム内「占う」ボタンに、onclickイベントハンドラを追加
クリックされると定義した「unsei」関数を呼び出す

《実行結果》

DOM操作のメソッド

HTMLドキュメントの階層構造

DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできます
この階層構造を「DOMツリー」と呼びます
DOMツリー内の個々の要素を「ノード」と呼びます

ノードを取得する getElementByIdメソッド

プログラムで目的のノードを取り出す
引数には、HTMLにはタグで設定したid属性を指定します（HTMLタグにあらかじめid属性を指定しておく必要があります）

ノードにHTMLを設定する innerHTMLプロパティ

DOMの各ノードは、innerHTMLというプロパティが用意されています
「innerHTML」は日本語にすると「内部」ですが、文字通りノードの内部のHTMLを表します
innerHTMLの値を変更することにより、ノードのHTMLを動的に変更できます

《例》

	var myArea = document.getElementById('myArea');
	myArea.innerHTML = '<h2>中見出し</h2>';

unsei関数

function unsei(){
	var myArea = document.getElementById('myArea');
	var num = Math.floor(kuji.length * Math.random());
	myArea.innerHTML = kuji[num];
}

getElementByIdメソッドを使用してIDが「myArea」のノードを取得し、変数myAreaに格納します
0から「要素数 -１」までの整数をランダムに生成して、変数numに格納します
この変数は、配列「kuji」の添字として使用します
innerHTMLプロパティに配列kujiの要素を代入して、表示されるメッセージを更新しています

まとめ

DOMを使用すると、HTMLの任意の要素にアクセスできる
指定したIDのノードを取り出す getElementByIdメソッド
ノードのHTMLを変更する innerHTMLプロパティ