属性値を取得/設定するときの注意点

JavaScriptを使ってHTMLの属性値を取得または設定するときは、属性名とプロパティが一致していないケースがあるので注意が必要。 たとえば、CSSクラスを表す属性は「class」だが、JavaScriptで取得/設定するときのプロパティは「className」になる。

<p class="summary">サンプル</p>  ←HTML

node.className = 'summary'; ←JavaScript

属性とプロパティとの名前の違いを意識したくないならば、getAttribute/setAttributeメソッドを使用すればよい。 使い方は次のとおり

要素ノード.getAttribute(属性名)   ←取得
要素ノード.setAttribute(属性名,属性値) ←設定

var url = link.getAttribute('href');
link.setAttribute('href','http://www.wings.msn.to/');

なお、getAttributeはformの中では使えない。要素ノード.属性名ならばOKである。