属性ノードの変更

属性ノード

属性は Attribute の訳語です。

属性とはタグ内に「属性名="値"」という形で書かれるもので、実は src をすでに使っています。src="images/hoge.png" では、src が属性名で images/hoge.png が値です。

属性 = "値"
src = "image/hoge.png"
id = "area1"

属性ノードには src の他に class, id, title, href, alt, for, colspan, rowspan, type などたくさんあります。

属性ノードの値の変更

属性ノードの値の変更には2つの方法があります。既に使っている .src= の様に .属性名="値" を使う方法と setAttribute("属性名","値") を使う方法です。

たとえば

<img src="image/motogazou.png" alt="" id="n1" />

のsrcを変更するには

次の2つを使うことができます。まったく同じ結果になります。

document.getElementById("n1").src = "images/example.png";
document.getElementById("n1").setAttribute("src","images/example.png");

setAttributeはxml全部に使えるDOM標準のやり方です。elm.src=のような方法はhtml限定の書き方です。IEのver6では、setAttributeのメソッドにバグがありうまく働きません。その場合html限定の書き方をすれば回避できることがあります。srcは使えます。そろそろ IE ver6 も使われなくなってきているので、setAttributeをお勧めします。

html限定の方法もDOMに記載された標準ですが、似たような書き方なのだけれどブラウザごとに拡張した互換性のない書き方があります。区別が難しい場合がありますので注意が必要です。

.属性名="値" を使う方法

属性ノードを含んでいるエレメントノードに .属性名 をつけて指定したものに = を使って値を割り当てます。もともと持っていた値は破棄されます。

もう少し例をあげます

document.getElementById("area01").src = "images/hoge.png";

この例では id="area01" という属性ノードを持つエレメントノードの srcという属性を images/hoge.png に書き換えています。結果として画像が images/hoge.png に置き替わります。変数を使う場合は、

var elm = document.getElementById("area01");
elm.src = "images/hoge.png";

となります。id="area01" という属性ノードを持つエレメントノードを elm という変数で表し、elm の中の srcという名前の属性を images/hoge.png に書き換えると書きます。

setAttribute("属性名","値") を使う方法

属性ノードを含んでいるエレメントノードに .setAttribute("属性名","値")を使って値を指定します。こちらも、もともと持っていた値は失われます。

document.getElementById("area01").setAttribute("src","images/hoge.png");

変数を使う場合は、

var elm = document.getElementById("area01");
elm.setAttribute("src","images/hoge.png");

src以外の属性ノードの値の変更

alt, titleなども同様に変更できます。

titleでも次の2つはまったく同じに使うことができます。

document.getElementById("n1").setAttribute("title","ここが要点です");
document.getElementById("n1").title = "ここが要点です";

altでも同じです。

document.getElementById("n1").setAttribute("alt","コブシの花の写真");
document.getElementById("n1").alt = "コブシの花の写真";

classだけは、classがプログラムで別の意味を持つためclassNameにしなければなりません。

document.getElementById("n1").setAttribute("class","mushi");
document.getElementById("n1").className = "mushi";

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