DOMで属性を変更する

属性変更

　さて、今度はタグの間に挟まれた内容ではなくて、属性(Attribute)を変えてみよう。
　 HTMLとしては、<tag attr="この部分">となる。
　コレも色々な方法が用意されているので、一つずつ試して行く事にする。とりあえずstyle属性を変更して、文字をボールドに変えてみたい。

style.fontWeightで変更

　まずは、ノードの属性を使って変更する方法。
　属性の名前が、HTMLやCSSとは微妙に違ったりするのがナンだが、余計な手続きが要らないので、使いやすいことは使いやすい。

　style属性の、さらにfont-weightのCSS属性を変更するということで、それらをドット(.)で繋いで、boldという値を代入。
　属性名がfont-weightでは無く、fontWeightなのに注意。

var theNode = document.getElementById('test1');
theNode.style.fontWeight = 'bold';

サンプル

style.fontWeightでboldに

　ま、特に問題無く実行できる。

setAttributeで変更

　次は、setAttributeメソッドを使う方法。
　これはHTMLと同じ属性名が使えるので、その点では分りやすいが、手続き的にはちょっと分りにくい。XHTMLの場合は属性名は全て小文字なので、ここでも小文字を使うようにすること。
　XHTML使っていて、今更JavaScriptの中だけ大文字を使う人もいないと思うけど。

　次のコードを見てもらえれば分る通り、タグに書き込むのとほとんど一緒。ちなみに、文字を囲っているダブルクォート"とシングルクォート'の違いは無い。
　JavaScriptはダブルクォートの中に記述されることが多そうなので、それとだぶらないように、とりあえずシングルクォートを使うクセをつけようとしているだけ。

var theNode = document.getElementById('test2');
theNode.setAttribute('style', 'font-weight:bold;');

サンプル

setAttributeでboldに

　ふっ…IE5.2で動かねぇ。

setAttributeNodeで変更

　今度は、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系のブラウザだねぇ。

DOMするならMozillaかもなー

　Mozillaに感銘を受けた私はMozilla関連で調べて、DOM レベル 1 コアの使用って記事を見つけた。
　まぁ、なかなかわかりやすいわな。
　しかし、Mozillaそのものはインタフェースやらなんやら、すげぇ納得いかんのでメインに使う気にはなかなかならんなぁ。

　今日はここまで。