感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

【プログラミング 125.5時間目】JavaScriptのDOM周り

<スポンサーリンク>

DOMとは、「タグによって構造化されたデータ」のこと。
ドキュメントの構成要素をオブジェクトとしてJavaScriptからアクセスできるようにする仕組みである。

紛らわしいが、HTML側から見たときに「タグ」と呼ばれるものが、DOM側から見たら「ノード」と呼ばれる。

あるidを持つタグにJavaScriptプログラムからアクセスしたいときは以下のように書く。

document.getElementById("id名");

・p要素のタグの中身を変更するサンプル

<?xml version="1.0" encoding="shift_jis"?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title> DOM TEST </title>
<script language="JavaScript">
function changeText() {
	alert("<p>のテキストを書き換えてみる");
	document.getElementById("CTXT").innerHTML = "テキスト変更";
}
</script>
<body>
<h1>DOMとJavaScriptについて</h1>
<p id="CTXT">ここのテキストが書き換えられる</p>
<form name="form1">
<input type="button" onClick="changeText()"  value="押したら変更">
</form>
</body>
</html>

Javascriptの使用目的の1つは、ページ内のコンテンツを再読み込み無しで更新すること

document.getElementById:タグに付けられたid=の値で抽出
document.getElementsByName:タグに付けられたname=の値で抽出
document.getElementsByTagName:タグ名で抽出

■onLoadが必要な理由
JavaScriptのコードはページが読み込まれたときに、functionで括っていないものは上から順次実行されていく。

・onLoadはHTMLの読み込みが全て完了してから発生するため、onLoadで動く関数がどこに書かれていても処理は正しく実行される。

<参考書籍>