タグ名を使ってエレメントノードを探します。
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タグを見つけます。
複数の画像が表示されていて ボタンをクリックすると全部の画像が変化する仕組みのあるページをつくりなさい。
getElementsByTagName を使用すること。
index.htmlからは「TagNameから」という名前のリンクから行けるようにすること。
画像は大きな画像を使うで使った絵や、新しく書いた絵を使うこと。自作に限る。
Gimpオリジナルのxcfファイルはウェブページには使用できません。png画像への変換やjpg(jpeg)画像への変換を参考にpngやjpgに変換して使用すること
小さな画像を作るときにはGimpのページの写真の縮小が参考になる
理解できない場合は、DOMの課題に共通の作成例を参考にしなさい。