タグの属性値を操る：DOMの基本を学ぼう（5）（1/3 ページ）
Aタグのhref属性やIMGタグのsrc属性など、HTMLの見た目をダイナミックに変更する属性値の操作を解説。きっと実践で役立ちます。
旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、主にDOM Level 1で規定されている手法を使い、JavaScriptでどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説します。これにより、JavaScriptからHTML要素を手に取るように操れるようになります。
前回の「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" onmouseover="btnOver(this)"
onmouseout="btnNormal(this)"/>
<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タグに規定されている属性プロパティの一部を見てみましょう。
| 属性プロパティ | 説明 |
|---|---|
| accessKey | キーボードから該当の要素にフォーカスするための文字指定 |
| href | リンク先を表すURI |
| name | アンカー名 |
| tabIndex | タブを押して要素のフォーカスを移動する順番 |
| target | リンク先を表示するフレーム属性プロパティ説明 |
| 属性プロパティ | 説明 |
|---|---|
| align | 周りのテキストに対する配置を指定 |
| alt | 代替テキスト |
| border | 画像を取り囲む境界線の幅 |
| height | 画像の高さをピクセルで表す |
| hspace | この画像の左右の空白幅をピクセルで表す |
| name | この要素の名前src画像のソースを指し示すURI |
| vspace | この画像の上下の空白高をピクセルで表す |
| width | 画像の幅をピクセルで表す |
| Aタグの属性プロパティ | |
ごらんの通り、ありとあらゆる属性プロパティが定義されていることがおわかりでしょう。しかしよく見ると、頻繁に使う属性がいくつか足りないことに気づくのではないでしょうか。スタイルシートを適用するためによく使われる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="背景色変更"
onclick="classChange()" /></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で指定されたスタイルが適用され、ボックスの背景色は赤色に変わります。
Copyright © ITmedia, Inc. All Rights Reserved.