属性ノードの読み取り

getAttribute("属性名")

これまで src の値を変更して画像を置き換えることをやってきましたが、この値を読み取ることもできます。

getElementByIdなどで得たエレメントノードに対して使用します。

document.getElementById("area01").getAttribute("src");

上の例では、このページ(document)のなかで,Idが(ById) area01 であるようなエレメント(Element)を見つけ(get),その中の src という属性の値を得ます。

次の様に変数を介して調べる場合もあります。

var elm = document.getElementById("area01");
elm.getAttribute("src");

上記の例では値を得ますが、表示されるわけでもなく、これだけでは何も変化はありません。

var a = elem.src; はできる?

使用例

エレメントノードの取得(ByID)の例と同じものです。クリックされたボタンの数字の画像が黄色い丸(images/yellow.png)にになります。ボタンに対応した id の要素を探して、その src を書き換えています

1 2 3 4 5 6 7 8 Clear

違うのはここからです。src属性を読み取って黄色い丸(images/yellow.png)になっているものだけを、赤い丸(images/red.png)に書き換えます。

黄色だけ赤に

function yellow2red(){
    var i;
    var elm;
    for (i=1;9>i;i++){
        elm = document.getElementById("n"+i);
        if (elm.getAttribute("src")=="images/yellow.png"){
            elm.src="images/red.png";
        }
    }
}

classの読み取り

class="even" となっているものの画像を替えます。

class="even"だけ赤に

function changeeven(){
    var i;
    var elms = document.getElementsByTagName("img");
    for (i=0;elms.length>i;i++){
        if (elms[i].getAttribute("class")=="even"){
            elms[i].src="images/red.png";
        }
    }
}

画像の指定は次の様になっています。

<p>
<img src="images/n1.png" alt="" class="odd">
<img src="images/n2.png" alt="" class="even">
<img src="images/n3.png" alt="" class="odd">
<img src="images/n4.png" alt="" class="even">
<img src="images/n5.png" alt="" class="odd">
<img src="images/n6.png" alt="" class="even">
<img src="images/n7.png" alt="" class="odd">
<img src="images/n8.png" alt="" class="even">
</p>

ボタンの部分です。

<p class="btn"><span onclick="changeeven()">class="even"だけ赤に</span></p>

課題 ファイル名 attr.html

ボタンをクリックすると画像の要素のclassを読みとって、class="even" のところだけ別の画像にする仕組みのあるページをつくりなさい。

index.htmlからは「属性」という名前のリンクから行けるようにすること。

理解できない場合は、DOMの課題に共通の作成例を参考にしなさい。


ウェブページ(Dec.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/
Dec.2009 初稿