タグの属性値を操る：DOMの基本を学ぼう（5）（1/3 ページ）

　前回の「NodeListの活用にはご注意を」では、HTML上のタグ要素にアクセスする手法を学習しました。 これまでは、HTMLに存在する要素を読み取るだけでした。これからはタグの属性値を操る方法を解説していきます。Aタグのhref属性やIMGタグのsrc属性といった属性値の操作は、HTMLの見た目や動作をダイナミックに変更することができますので、実践で非常に役立ちます。

本連載は、ソフトバンククリエイティブ刊行の『標準DOMスクリプティング』のうち「第2章 DOMの基本」を、同社の許可を得て転載するものです。

本書は、DOM（Document Object Model）とJavaScriptの関係を分かりやすく解説しています。さらに、JavaScriptからDOMを介して、いかにしてHTMLやXMLの操作ができるのかを紹介しています。またこれらのことを学びながら、クロスブラウザ対策の重要性も理解できるようになると思います。

なお、 Webでの連載として転載するに当たり、若干表現を変更している点があります（例えば「本書は」としている部分は「本連載は」としていることや図版などの省略など）。その点ご了承ください。

【注文ページへ】

属性プロパティによる操作

　タグの属性とは、Aタグのhref、IMGタグのsrcやalt、INPUTタグのnameやvalue、ほとんどのタグで使えるidなどを表します。属性の操作は、ダイナミックなHTMLを構成するためには不可欠といえるでしょう。JavaScriptからIMGタグの画像を切り替えたり、Aタグのリンク先URLを変更するといったことも可能になります。

　属性の扱い方は、DOMというキーワードがメジャーになる前からよく知られています。例えば、IMGタグのsrc属性を参照するには、srcプロパティを使ったのではないでしょうか。

image_change.html
<img src="normal.gif" 

<script type="text/javascript">
　 function btnOver(elm) {
　　 elm.src = 'over.gif';
　 }
　 function btnNormal(elm) {
　　 elm.src = 'normal.gif';
　 }
</script>

　このような手法はブラウザが独自に実装したBOMではないかと思われている方が多いかもしれませんが、「DOM Level 2 HTML Specification」で、DOMの仕様としてしっかりと定められています。ほとんどのタグ属性をDOMでカバーしています。

　ここでは、AタグとIMGタグに規定されている属性プロパティの一部を見てみましょう。

　ごらんの通り、ありとあらゆる属性プロパティが定義されていることがおわかりでしょう。しかしよく見ると、頻繁に使う属性がいくつか足りないことに気づくのではないでしょうか。スタイルシートを適用するためによく使われるstyle属性やclass属性がありません。スタイルシートの適用に関しては、「DOM Level 2 Style Sheets and CSS」で別途規定されており、DOMではstyle属性を直接操作する仕様にはなっていません。これに関してはのちほど詳しく解説します。

　class属性については、AタグやIMGタグに特化した属性ではなく、BODYタグ内で使えるタグすべてに対して利用可能です。しかし、プロパティ名は"class"ではなく"className"です。DOMはJavaScriptのためだけの仕様ではないことは前述の通りです。しかし各種言語で、"class"という名前は関数名などですでに使われていたり予約語であったりします。それらとの重複を避けるため、DOMでは別の名前を割り振ったのです。class属性に関しては、プロパティ名が違うことを忘れないようにしてください。

　属性プロパティは読み取り・書き込み、ともに可能です。

anchor_uri.html
<a href="http://www.w3.org/" id="link">W3C</a>
<script type="text/javascript">
　 /*Aタグの要素オブジェクト*/
　 var link = document.getElementById('link');
　 /*href属性値*/
　 var uri = link.href;
　 /*アラートウィンドウに表示*/
　 alert(uri);
　 /*URIを書き換える*/
　 link.href = 'http://www.sbcr.jp/';
</script>

　このHTMLをブラウザで表示させると、まず、Aタグに記述されているhref属性値がアラートウィンドウで表示されます。この時点では"http://www.w3.org/"が表示されます。その後、link.hrefプロパティの値を"http://www.sbcr.jp/"に書き換えます。実際に"W3C"のリンクをクリックすると、リンク先が書き換わっていることが確認できます。

　もうひとつ、よく使う属性変更の例を見てみましょう。先ほど説明したclass属性を使うサンプルです。class属性はスタイルシートの識別子として使われることが多いのはご存じの通りです。ボタンを押すことで、特定の要素のclass属性を切り替え、適用するスタイルシートを変更する方法をごらんください。

class_property.html
<style type="text/css">
　#box { width: 150px; height:80px; border: 1px solid #4c4c4c; padding:
　12px; text-align: center; }
　.red { background-color: #ff0000; }
　.gray { background-color: #cccccc; }
</style>
<div id="box" class="gray">
　 <div>ボタンを押すと、ボックスの背景色が変わります。</div>
　 <div><input type="button" name="btn" value="背景色変更"
　 /></div>
</div>
<script type="text/javascript">
　function classChange() {
　　document.getElementById('box').className = 'red';
　}
</script>

　このHTMLでは、DIVタグで構成されたボックスが表示されます。このDIVタグにはclass属性値として"gray"が指定されていますので、最初ブラウザで表示したときには、スタイルシートの.grayで指定されたスタイルが適用されます。つまり、背景色がグレーとなります。

　ボックス内にはボタンが配置され、これを押すと、onclick属性で指定されたJavaScript関数のclassChange関数が実行される仕組みとなっています。classChange関数では、ボックスのDIVタグのclass属性値を、classNameプロパティを使って'red'に置き換えます。すると、スタイルシートの.redで指定されたスタイルが適用され、ボックスの背景色は赤色に変わります。

ボタンを押す前

ボタンを押したあと