エレメントノードの取得(ByID)

getElementById("idの値")

idを使ってエレメント(要素)ノードを探します

document.getElementById("main")

例では、このページ(document)のなかで,Idが(ById)mainであるようなエレメント(Element)を見つけ(get)ます。

次のようなエレメントノードが見つかります。id="main"だからです。

<div id="main">ひとつのページに同じ値のidはありません。</div>

見つかったノードに名前をつけて名前で指定することができます。

var mynode = document.getElementById("main");

こうすると mynode という名前で id="main" なエレメントノードを指定できるということです。

使用例

クリックされたボタンの数字の画像が黄色い丸になります。ボタンに対応した id の要素を探して見つかった要素の画像を入れ替えています

1 2 3 4 5 6 7 8 Clear

①②③④⑤...の画像を置く所(一部省略) それぞれの画像タグに id を指定しています。

<img src="images/n1.png" alt="" id="n1">
<img src="images/n2.png" alt="" id="n2">
......

押しボタン(1～8とclear)の部分(一部省略) それぞれのボタンに対応する id を指定してスクリプトを呼び出すように書いています。

<span onclick="changeimg('n1')">1</span>
<span onclick="changeimg('n2')">2</span>
......
<span onclick="clearimg()">Clear</span>

プログラム本体。changeimg(nid)は nid で id を受け取りその id に合致するエレメントのソースを変更します。

function changeimg(nid){
   var kaerutokoro = document.getElementById(nid);
   kaerutokoro.src="images/nof.png";
}

clearimg()は n1 から n8 までの id をつくり、全部の id に合致するエレメントのソースを変更し、元の画像にもどします。

function clearimg(){
   var i;
   for(i=1;9>i;i++){
      nid = "n" + i;
      document.getElementById(nid).src = "images/" + nid +".png";
   }
}