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そのものはインタフェースやらなんやら、すげぇ納得いかんのでメインに使う気にはなかなかならんなぁ。

 今日はここまで。


2004-06-24