divタグ以外のタグもid属性を指定しgetElementById()で各種処理を行うことができます（サンプルを
実行する）。bodyタグも同様に処理を行うことができますが、bodyタグはgetElementById()より、document.bodyとしてアクセスされることが多くあります。例えば以下のサンプルは背景色を変更するものです。（実際のサンプルを
実行する。注意：スタイルシートでなく旧来のプロパティにアクセスしています。スタイルシートについては別項で説明します）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>document.bodyを使って処理</title>
<script type="text/javascript"><!--
function setBGColor()
{
document.body.bgColor = "#ffffaf";
}
// --></script>
</head>
<body>
<h1>document.bodyを使って処理</h1>
<form>
<input type="button" value="背景色を黄色に設定" onClick="setBGColor()"><br>
</form>
</body>
</html>
bodyタグにidを付けた場合には以下のようになります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>bodyにidを指定し処理</title>
<script type="text/javascript"><!--
function setBGColor()
{
document.getElementById("page0").bgColor = "#ffffaf";
}
// --></script>
</head>
<body id="page0">
<h1>bodyにidを指定し処理</h1>
<form>
<input type="button" value="背景色を黄色に設定" onClick="setBGColor()"><br>
</form>
</body>
</html>
bodyタグにidを付けるメリットは何でしょうか。スタイルシートではbodyタグにidを割り振ることで１つのスタイルシートファイルで複数のページレイアウトを管理することができます。同様に１つのJavaScriptファイルで個別のページに応じた処理を記述することができます。
上記のスクリプトではbodyタグのbgColor属性にアクセスしていましたが、タグの属性にアクセスするには直接プロパティ名を記述する以外にsetAttribute()を使うこともできます。直接プロパティを指定する方法と異なり、引数を変数にすることができるメリットがあります。setAttribute()の最初の引数に属性名、次の引数に設定する値を指定します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>setAttributeで処理</title>
<script type="text/javascript"><!--
function setBGColor()
{
document.getElementById("page0").setAttribute("bgColor","#ffffaf");
}
// --></script>
</head>
<body id="page0">
<h1>setAttributeで処理</h1>
<form>
<input type="button" value="背景色を黄色に設定" onClick="setBGColor()"><br>
</form>
</body>
</html>
Ajaxではタグが複雑に入れ子になることもあります。タグが入れ子になった場合のアクセス方法を見てみましょう。以下のサンプルはdivタグ内にdivタグが複数ある場合です。このdivタグにまとめてアクセスするにはID名を「名前+連続番号」にしておく方法があります。このようにするとfor命令とgetElementById()を使って以下のようにまとめてdivタグにアクセスすることができます。以下のサンプルはボタンをクリックするとdivタグ内の文字を乱数値にします。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>連番ID名で処理</title>
<script type="text/javascript"><!--
function setLayerText()
{
targetName = "layer";
for (i=0; i<5; i++)
{
document.getElementById(targetName+i).innerHTML = Math.random();
}
}
// --></script>
</head>
<body>
<h1>連番ID名で処理</h1>
<form>
<input type="button" value="レイヤー内容変更" onClick="setLayerText()"><br>
</form>
<div id="layer0">レイヤー 0</div>
<div id="layer1">レイヤー 1</div>
<div id="layer2">レイヤー 2</div>
<div id="layer3">レイヤー 3</div>
<div id="layer4">レイヤー 4</div>
</body>
</html>
ID名を付けることができればgetElemntById()で解決できますが、divの内容が頻繁に書き換えられるAjaxでは現実的ではないかもしれません。前の章でやったXMLデータを読み込む際にノードを辿ってデータにアクセスしました。getElementById()でなく以下のようにしてノードをたどってデータにアクセスする方法もあります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>ノードで処理</title>
<script type="text/javascript"><!--
function setLayerText()
{
targetName = "layer";
layObj = document.getElementById(targetName);
for (i=0; i<layObj.childNodes.length; i++)
{
if ((layObj.childNodes[i].nodeType == 1) && (layObj.childNodes[i].tagName == "DIV"))
{
layObj.childNodes[i].childNodes[0].nodeValue = Math.random();
}
}
}
// --></script>
</head>
<body>
<h1>ノードで処理</h1>
<form>
<input type="button" value="レイヤー内容変更" onClick="setLayerText()"><br>
</form>
<div id="layer">
<div>レイヤー 0</div>
<div>レイヤー 1</div>
<div>レイヤー 2</div>
<div>レイヤー 3</div>
<div>レイヤー 4</div>
</div>
</body>
</html>
ノードを辿る方法では良い場合もありますし、複雑になってしまう場合もあります。そこでgetElementsByTagName()を利用してみましょう。多くのサイトやページではdocument.getElementsByTagName()と記述されていますが、この場合documentオブジェクト内にある指定されたタグ名を持つものを示します。つまりdocumentオブジェクトを基準にして情報を取得しているわけです。この基準を親のdivタグにすることで、子要素（入れ子）になっているdivタグや任意タグにアクセスすることができます。上記のサンプルはgetElementsByTagName()を使えば非常に簡単なスクリプトになります。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>getElementsByTagNameで処理</title>
<script type="text/javascript"><!--
function setLayerText()
{
targetName = "layer";
layObj = document.getElementById(targetName);
divObj = layObj.getElementsByTagName("div");
for (i=0; i<divObj.length; i++)
{
divObj[i].innerHTML = Math.random();
}
}
// --></script>
</head>
<body>
<h1>getElementsByTagNameで処理</h1>
<form>
<input type="button" value="レイヤー内容変更" onClick="setLayerText()"><br>
</form>
<div id="layer">
<div>レイヤー 0</div>
<div>レイヤー 1</div>
<div>レイヤー 2</div>
<div>レイヤー 3</div>
<div>レイヤー 4</div>
</div>
</body>
</html>
上記のようにすると基準となるタグを変更することで汎用性も出ます。基準となるオブジェクトを関数の引数として渡すようにすることができるためです。（もしくはメソッドやプロパティとしてオブジェクトに設定する）。getElementsByTagName()やdocument.getElementById()をうまく利用しましょう。
次項ではスタイルシートへのアクセスについて説明します。
[
第五章 6:スタイルシートへのアクセス方法へ]
[
目次へ]
(2006.1.12)