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

getElementsByTagName("タグ名")

タグ名を使ってエレメントノードを探します。

document.getElementsByTagName("h2")

例では、このページ(document)のなかで,タグが(ByTagName)h2であるようなエレメント達(Elements)を見つけ(get)ます。

次のようなノードが見つかります。

<h2>普通は複数見つかる</h2>

見つかったものは配列の様に扱うことができます。

配列の要素数はlengthで調べます。一つひとつの要素は[ ]で囲った添え字で指定できます。添え字は0からlengthで与えられる数値の一つ下までになります。つまり、lengthが5の時は、[0]~[4]までの5つということです。

document.getElementsByTagName("h2")[0];
document.getElementsByTagName("h2").length;

変数を使うこともできます。

var yousoh2s = document.getElementsByTagName("h2");    //h2要素の配列
var kazu     = yousoh2s.length;                        //その配列の要素数
var firsth2  = document.getElementsByTagName("h2")[0]; //1番目のh2要素
var yousoimgs = document.getElementsByTagName("img");  //img要素の配列
yousoimgs[0].src="images/hoge.png";                    //1番目のimg要素のsrcを変更

使用例

以下の画像のimgタグにはidはついていませんが、すべてのimgタグを探してその src を × にします。

×にする

画像の例(一部省略)。タグで指定するので id は不要です。(あっても邪魔にはなりません)。

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

スクリプト実行のための押しボタンは今回はひとつ。

<span onclick="changeall()">×にする</span>

プログラム本体。changeall()は getElementsByTagName("img")で見つけた全部のエレメントのソースを"images/nofx.png"に変更します。

function changeall(){
    var elms = document.getElementsByTagName("img");
    for (i=0; elms.length>i; i++){
            elms[i].src="images/nofx.png";
    }
}

範囲を絞った検索

すべての img なので、意図している範囲外の画像もすべて × になる可能性があります。

そんなときには、検索範囲を限定できます。

function changehani(){
    var hani = document.getElementById("koko");
    var elms = hani.getElementsByTagName("img");
    var i;
    for (i=0; elms.length>i; i++){
            elms[i].src="images/nofx.png";
    }
}

これはid="koko"の要素(たとえば pタグや divタグにこれを指定する)の中にある imgタグを見つけます。

課題 ファイル名 tagname.html

複数の画像が表示されていて ボタンをクリックすると全部の画像が変化する仕組みのあるページをつくりなさい。

getElementsByTagName を使用すること。

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

画像は大きな画像を使うで使った絵や、新しく書いた絵を使うこと。自作に限る。

Gimpオリジナルのxcfファイルはウェブページには使用できません。png画像への変換jpg(jpeg)画像への変換を参考にpngやjpgに変換して使用すること

小さな画像を作るときにはGimpのページの写真の縮小が参考になる

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


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