このアーカイブは同期化されません。 mixi の日記が更新されても、このアーカイブには反映されません。
DOM を使って、HTML の一部を動的に生成してみよう。
HTML 文書自身を JavaScript を使って書き換える。
DOM による Dynamic HTML のテストという感じだ。
========== dom-test.html ==========
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>DOM test</title>
<script type="text/javascript">
<!--
function generate() {
// body 要素を全て検索
var bodies = document.getElementsByTagName("body");
// 先頭の body 要素を取得
var body = bodies.item(0);
// body 内の要素を全て消去
while (body.firstChild != null) {
body.removeChild(body.firstChild);
}
// a 要素を作成
var link = document.createElement("a");
// a 要素に href 属性を追加
link.setAttribute("href", "http://mixi.jp");
// 文字列「mixi」を表すテキストノードを作成
var text = document.createTextNode("mixi");
// テキストノードを a 要素の子として追加
link.appendChild(text);
// a 要素ノードを body 要素の子として追加
body.appendChild(link);
}
// -->
</script>
</head>
<body>
<input type="button" value="Test!" onclick="generate()">
</body>
</html>
========== end of dom-test.html ==========
さて、上記を Web ブラウザで開くと、
「Test!」と書かれたボタンが 1 つだけぽつんとある。
このボタンを押すと、ボタンが消え、
代わりに mixi へのリンクが出現する。
動作を追いかけてみよう。
まず、最初に「Test!」ボタンを押すと、
ボタンの onclick 属性の指定により、
JavaScript の generate 関数が呼ばれる。
generate 関数では、DOM を使って HTML を操作している。
HTML に埋め込まれた JavaScript では、
DOM の核となる Document オブジェクトを、
document プロパティとして参照することができる。
Document の getElementsByTagName メソッドは、
ツリーの中を辿って特定の名前を持つ要素を探し、
見つかった要素全てを NodeList オブジェクトとして返す。
NodeList は、item メソッドを持っており、
リストから要素を取り出すことができる。
HTML では、通常 body は 1 つしかないため、
ここでは、bodies.item(0) と最初のものを取得した。
要素は、Element オブジェクトである。
次に、body の内容を全て削除する。
Element の firstChild プロパティは、
要素が内包する最初の子供となるノードを取得する。
ノードとは、木構造における項目のことであり、
DOM では、HTML 要素だけでなく直接記述している文字列も、
TextNode と呼ばれるノードとして扱われる
removeChild メソッドは、指定した子要素を削除する。
firstChild は子供がなければ null を返すので、
while で繰り返すだけで全て削除できることになる。
これで、本文は空になった。
続けてリンクを作成する。
Document の createElement は、
要素をメモリ上に作成するメソッドである。
作成しただけでは、文書の木構造に追加されない。
作成した Element オブジェクトは空（<a></a>）なので、
最初に setAttribute メソッドで属性を追加する。
ここでは href 属性に "http://mixi.jp" を設定した。
そして、要素の内容を作成する。
a タグはハイパーリンクなので、リンク用の文字列が必要だ。
文字列は、まず Document の createTextNode メソッドで、
TextNode オブジェクトとして作成する。
ノードは、Element の appendChild メソッドを使うと、
要素の子供として追加することができる。
これでハイパーリンク要素ができた。
最後に、body の appendChild メソッドを呼んで、
作成したハイパーリンクを本文に追加して完成となる。
DOM はオブジェクト指向に作ってあるため、
本文のテキストなどもオブジェクトとなる。
考え方を理解するのに少し時間は掛かるが、
慣れてしまえば、HTML であろうが、
外部から読み出した XML であろうが同じ手順でアクセスし、
要素や属性の読み出しや変更が可能となるのだ。