参考ページ：IDセレクタの説明
JavaScriptのプログラム実行で画像を変更する場合、次のようにname属性を利用してきました。
N1の名前を付けた画像の変更例です。
<html lang="ja"><head>
<script type="text/javascript"><!--
function change1(){
document.N1.src="img/n05.gif";//画像変更
}
// --></script>
</head><body>
<img src="img/n03.gif" name="N1"><br>//ここで名前を付けている
<input type="button" value="change5" onclick="change1()"><br>
<input type="button" value="change3"
onclick="document.N1.src='img/n03.gif'">
</body></html>
|
 |
同じ動作ですが、id属性を付けた画像を変更する場合の例を、以下に示します。
この場合は、上記のdocument.N1.srcの代わりに、
document.getElementById("id名").src
の表現を使っています。
(id名にID1を指定した例)
<html lang="ja"><head>
<script type="text/javascript"><!--
function change2(){
document.getElementById("ID1").src="img/n05.gif";//画像変更
}
// --></script>
</head><body>
<img src="img/n03.gif" id="ID1"><br>//ここでid名を付けている
<input type="button" value="change5" onclick="change2()"><br>
<input type="button" value="change3"
onclick="document.getElementById("ID1").src='img/n03.gif'">
</body></html>
|
|
さて、
name属性とid属性どちらを使った方がよいでしょうか？
操作対象が画像であれば、どちらでも構いません。（getElementByIdが新しい表現です）
しかし、imgの画像以外要素では、どうでしょうか？
formの中のinput要素であればnameでアクセス可能でした。しかしそれ以外で、name属性で名前をつけてもこのような操作はできません。
例えばp span a などは name属性で名前を付けても、
document.name属性名という表現が使えないのです。
後述する特別な配列と呼ばれる表現で、似た操作を行うことができますが、扱いにくい表現になります。
また、
imgやinputのname属性には 同じ名前を複数の箇所に付けることもでき、その場合も配列と呼ばれる構造になるため
アクセスするための表現が変わって、規則が複雑と感じるでしょう。
対して、id属性は、同じ名前を複数箇所に付けることができないものでした。
つまり
document.getElementById("id名").〜
の表現で、一つの要素を指定することになります。
そして それに対してさまざまなアクセスが統一的にできるようになっています。
結論としてjavascriptで制御すると限った場合は、
id名を付けて、
document.getElementById("id名").〜
と指定する方が、どのタグに対しても同じように扱えるので、初心者には分かりやすいでしょう。
しかし同一名でname配列を利用した方が効率がよいケースもありますし、
form内のinput要素ではnameを付けなければ サーバーへデータを送れないなど、
name属性の使い方も大切な規則になっています。
ページ移動では<a href=
"移動先ページのHTMLパス"
>クリック範囲</a>の表現を使います。
この移動先をJavaScriptで変更する場合は、このタグに名前を付けて、
そのdocument.getElementById(id名).hrefに
=を使って移動先アドレスの文字列をセットできます。
例えば、
<a href= "ex/n1001.htm"
id="a1">
最初のHTML</a>の記述があるとします。
このex/n1001.htmを、
ex/n4001.htmに変更する場合、
次のように書きます。
document.getElementById("a1").href = "ex/n4001.htm";
document.getElementById("id名").〜 の表現の利点は、同じような表現で、さまざまな要素に使える点です。以下では SP1のid名が付いているspan要素の罫線と DV1のid名のdiv要素のサイズと色を spanのマウスイベントで変更している例です。
<html lang="ja"><head>
<script type="text/javascript"><!--
function over(){
document.getElementById("SP1").style.border="inset 8px lime";
document.getElementById("DV1").style.backgroundColor="red";
document.getElementById("DV1").style.height="30px";
}
function out(){
document.getElementById("SP1").style.border="outset 5px lime";
document.getElementById("DV1").style.backgroundColor="blue";
document.getElementById("DV1").style.height="100px";
}
// --></script></head><body>
<div id="DV1"
style="background-color: blue; width: 100px; height: 100px; float: left;">
</div>
<div style="background-color: yellow;">
次の<span id="SP1" onmouseover="over()" onmouseout="out()"
style="border: outset 5px lime;">この部分</span>
にマウスを重ねると、左の領域の色と高さが変更できます。
</div></body></html>
document.getElementById("id名").innerHTML
=HTMLタグを含む文字列表現で、
タグ内容を全く違うものへの変更が可能です。
これは 元々W3Cの仕様で無かったもので、IE独自が使える表現でしたが、
要素の内容を完全に置き換える簡単な手段だったため、他のほとんどのブラウザで採用されています。
以下にボタン操作で、P1のid名のpの内容全体を変更している例を示します。
<html lang="ja"><head>
<script type="text/javascript"><!--
function bt1(){
var s="<img src='img/faceA0.gif'>";
s=s+"あなたは、<span style='background-color: #66FF00'>";
s=s+"引っ込み思案</span>ですが、失敗がない人生を送れます。";
document.getElementById("P1").innerHTML=s;
}
function bt2(){
var s="<img src='img/faceA1.gif'>";
s=s+"あなたは、<span style='background-color: #FFCC00'>";
s=s+"楽天家</span>ですが、思わぬ落とし穴に はまるかも？";
document.getElementById("P1").innerHTML=s;
}
// --></script></head><body>
<p style="font-weight: bold; font-size: 14pt;">性格診断です。</p>
<p id="P1">次の絵を見て、<br>
感じ方のボタンをクリックください。<br>
<img src="img/faceB2.gif" width="100"><br>
<input type="button"value="困った顔"onclick="bt1()">
<input type="button"value="眠った顔"onclick="bt2()">
</p>
</body></html>
|
性格診断です。 次の絵を見て、 |
再び、ボタンを選択したい場合は、ブラウザの更新ボタンをクリックしてください。
なお上記では、P1のid名が付いているpタグ内容の全体を
変数 s の内容で置き換えています。その変数の文字列は+の連結機能を使って、
表示に使う文字列を作っているテクニックも注目してください。
上の左右のボタンクリックで、下のリンク先とその表示が変更されます。このリンクタグのid名は
xxxとして、href属性の後に書いてください。
上のボタンの表示内容は、リンク先のWebページの内容です。
下のボタンは、上のボタンで設定したリンク先のファイル名をalertで表示するボタンです。
上ボタンでxxxの名前の変数にファイル名を記憶して、
それを下のボタンで表示しています。
inputの属性は type value onclick の順番に指定してください。
左上、右上、下のボタンで実行させる関数(function)の名前は、それぞれ
sub1, sub2, sub3にして、この順番で作成ください。
また、sub1, sub2のfunctionでは、リンクタグの表示内容を
innerHTMLを利用して変更しています。
この変更は、各functionの最後で行ってください。
以下で、この問題で使われるHTMLファイルを示します。これらのファイルは、 出題されるHTMLの位置と同じディレクトリ内に位置するexディレクトリ内に存在します。 対応するボタンの表示文字列と共に示します
