ゼロからわかる現代JavaScript

ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

２５．HTMLの書き換え「DOM」

さてjavascriptは大体分かったと思います。

ところが、javascriptは動的にページを書き換えることができないのです。

そこでドキュメントオブジェクトモデル(DOM)というものを使います。

いわゆる追加のメソッドです。

それを使うと、動的にページを書き換えることができ派手なアクションを作ることができます。

まず

・getElementByIdメソッド

を使ってみます。

まず、HTMLファイルに書き換えたい要素(この場合はDIV)にIDを追加します。

<div id= "ID">書き換えたい文章</div>

そして、javascriptファイルにgetElementById()で

document.getElementById("ID")

としてidの要素を参照します。

そして参照した要素のinnerHTMLプロパティに値を設定します。

今回使用するソースコード div.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
　　<title></title>
　　<SCRIPT src="javascript.js"></SCRIPT>
</head>
<body>
　　<div id="str1">ここを書き換えます</div>

　　<a href = "javascript:rewrite()">クリックしてね！</a>
　　<br /><br />
　　<a href = "javascript:rewrite2()">クリックしてね！</a>
</body>
</html>

今回使用するソースコード javascrpt.js

function rewrite() {
　　//idの要素を参照します
　　var str = document.getElementById("str1");

　　//要素のHTMLプロパティを変更する
　　str.innerHTML = "また図書館で";
}

function rewrite2() {
　　var str = document.getElementById("str1");
　　str.innerHTML = "神人";
}

上のリンクで、書き換えＨＴＭＬを

再度、下のリンクでも書きかえれるようになっています。

実行結果

コラム：
この方法はDHTML(ダイレクトHTML)と呼ばれるものです。
黒い三連星ではありませんよ？