画像であるimgタグへのアクセス方法も旧来のものから、新しい記述方法へ変更してみましょう。旧来のimgタグへのアクセスは以下のものがあります。
- name属性を利用してアクセス
- images配列を利用してアクセス（連想配列：images["sample"]）
- images配列を利用してアクセス（参照番号で：images[3]）
これらを利用した実際のサンプルは以下のようになります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（画像：旧来の方法）</title>
<script type="text/javascript"><!--
function swapImage1()
{
document.myPhoto.src = "flower.jpg";
}
function swapImage2()
{
document.images["myPhoto"].src = "dog.jpg";
}
function swapImage3()
{
document.images[0].src = "sky.jpg";
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（画像：旧来の方法）</h1>
<img src="photo.jpg"
name="myPhoto">
<form>
<input type="button" value="画像を入れ替え(1)" onClick="swapImage1()"><br>
<input type="button" value="画像を入れ替え(2)" onClick="swapImage2()"><br>
<input type="button" value="画像を入れ替え(3)" onClick="swapImage3()"><br>
</form>
</body>
</html>
赤字で示している部分が旧来のものです。name属性で名前を指定しdocument.images["画像名"]またはdocument.画像名でアクセスします。これを新しい方法で書く場合に、name属性をid属性にしdocument.画像名の代わりにdocument.getElementById()を使います。document.imagesの代わりはgetElementsByTagName()を使います。getElementsByTagName()は指定したタグの情報（参照）を配列変数として返します。つまりdocument.imagesと同じことになります。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（画像：ID）</title>
<script type="text/javascript"><!--
function swapImage1()
{
document.getElementById("myPhoto").src = "flower.jpg";
}
function swapImage2()
{
document.getElementsByTagName("img")[0].src = "dog.jpg";
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（画像：ID）</h1>
<img src="photo.jpg" id="myPhoto">
<form>
<input type="button" value="画像を入れ替え(1)" onClick="swapImage1()"><br>
<input type="button" value="画像を入れ替え(2)" onClick="swapImage2()"><br>
</form>
</body>
</html>
ページ内にある画像に対して配列を使って連続してアクセスすることもあります。旧来の方法ではdocument.images配列を利用して画像の入れ替えなどを行います。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（全ての画像を入れ替え：旧来）</title>
<script type="text/javascript"><!--
function swapImage()
{
imageLength = document.images.length;
for (i=0; i<imageLength; i++)
{
document.images[i].src = "icon.jpg";
}
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（全ての画像を入れ替え：旧来）</h1>
<img src="dog.jpg">
<img src="flower.jpg">
<img src="photo.jpg">
<img src="sky.jpg">
<form>
<input type="button" value="画像を入れ替え" onClick="swapImage()"><br>
</form>
</body>
</html>
新しい方法ではdocument.imagesではなく、getElementsByTagName()を使って画像にアクセスし処理を行います。上記サンプルを書き換えると以下のようになります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（全ての画像を入れ替え：新しい方法）</title>
<script type="text/javascript"><!--
function swapImage()
{
for (i=0; i<document.getElementsByTagName("img").length; i++)
{
document.getElementsByTagName("img")[i].src = "icon.jpg";
}
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（全ての画像を入れ替え：新しい方法）</h1>
<img src="dog.jpg">
<img src="flower.jpg">
<img src="photo.jpg">
<img src="sky.jpg">
<form>
<input type="button" value="画像を入れ替え" onClick="swapImage()"><br>
</form>
</body>
</html>
getElementsByTagName()はdocument.imagesの完全な代替にはなりません。状況に応じてgetElementById()と併用するか、どうしようもない場合にはdocument.imagesでアクセスすれば良いでしょう。ちなみに、上記のプログラムは、やや冗長に書いているので、多くの場合以下のように画像オブジェクト情報を一旦変数に格納してから利用します。また、この方がやや高速です。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（全ての画像を入れ替え：新しい方法2）</title>
<script type="text/javascript"><!--
function swapImage()
{
imageTags = document.getElementsByTagName("img");
for (i=0; i<
imageTags.length; i++)
{
imageTags[i].src = "icon.jpg";
}
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（全ての画像を入れ替え：新しい方法2）</h1>
<img src="dog.jpg">
<img src="flower.jpg">
<img src="photo.jpg">
<img src="sky.jpg">
<form>
<input type="button" value="画像を入れ替え" onClick="swapImage()"><br>
</form>
</body>
</html>
Ajaxでは画像だけでなく、テキストをページ内に表示したり書き換えたりします。このような場合にはdivタグまたはspanタグが利用されます。次項ではdiv, spanタグへのアクセス方法について説明します。
[
第五章 4:HTMLへのアクセス方法 - div -へ]
[
目次へ]
(2006.1.11)