さて、今度はタグの間に挟まれた内容ではなくて、属性(Attribute)を変えてみよう。
HTMLとしては、<tag attr="この部分">となる。
コレも色々な方法が用意されているので、一つずつ試して行く事にする。とりあえずstyle属性を変更して、文字をボールドに変えてみたい。
まずは、ノードの属性を使って変更する方法。
属性の名前が、HTMLやCSSとは微妙に違ったりするのがナンだが、余計な手続きが要らないので、使いやすいことは使いやすい。
style属性の、さらにfont-weightのCSS属性を変更するということで、それらをドット(.)で繋いで、boldという値を代入。
属性名がfont-weightでは無く、fontWeightなのに注意。
var theNode = document.getElementById('test1');
theNode.style.fontWeight = 'bold';
サンプル
style.fontWeightでboldに
ま、特に問題無く実行できる。
次は、setAttributeメソッドを使う方法。
これはHTMLと同じ属性名が使えるので、その点では分りやすいが、手続き的にはちょっと分りにくい。XHTMLの場合は属性名は全て小文字なので、ここでも小文字を使うようにすること。
XHTML使っていて、今更JavaScriptの中だけ大文字を使う人もいないと思うけど。
次のコードを見てもらえれば分る通り、タグに書き込むのとほとんど一緒。ちなみに、文字を囲っているダブルクォート"とシングルクォート'の違いは無い。
JavaScriptはダブルクォートの中に記述されることが多そうなので、それとだぶらないように、とりあえずシングルクォートを使うクセをつけようとしているだけ。
var theNode = document.getElementById('test2');
theNode.setAttribute('style', 'font-weight:bold;');
サンプル
setAttributeでboldに
ふっ…IE5.2で動かねぇ。
今度は、createAttributeで属性ノードを作って、setAttributeNodeで変更する方法。
そう、何でもノードなDOMモデルは属性もノードなのだ。
幾つもの要素に同じ属性ノードを設定することはできず、属性ノードを明示的にコピーして、コピーしたものを使う必要があるそうだ。…ふーん。
var theAttr = document.createAttribute('style');
theAttr.value = 'font-weight:bold;';
var theNode = document.getElementById('test3');
theNode.setAttributeNode(theAttr);
サンプル
styleをfont-weight:boldに
ふっ…IEでもSafari1.2.2でも動かねぇよ。
やっぱDOM実装が一番しっかりしてるのはMozilla系のブラウザだねぇ。
Mozillaに感銘を受けた私はMozilla関連で調べて、DOM レベル 1 コアの使用って記事を見つけた。
まぁ、なかなかわかりやすいわな。
しかし、Mozillaそのものはインタフェースやらなんやら、すげぇ納得いかんのでメインに使う気にはなかなかならんなぁ。
今日はここまで。