【Javascript】要素.value=xxxx と 要素.setAttribute(“value”, “xxxx”) どっちを使う？

Tweet

Category JavaScript 2010/03/05

https://developer.mozilla.org/ja/DOM/element.setAttribute

setAttribute() を使ってある属性、XULやHTMLの特別な値、およびHTMLの選択領域を変更することは、属性がデフォルト値を特定している場合に一貫性なく働きます。現在の値にアクセスしたり、変更したりするにはプロパティを使用すべきです。例としては elt.setAttribute(‘value’, val) の代わりに elt.value を使用します。

さて？どういう意味でしょう？

このようなリファレンスの記述を知らなくても、実際にやってみて不可解な現象に遭遇した方いるかもしれません。IEだけ使っていると出会ったことがないかもしれません。

試してみる

初期状態で入力欄の値は「123」。それぞれのボタンをクリックして値を確認すると、「123」のはずです。

手入力で123を456に書き換えてから、またボタンをクリックします。IEではどちらも456が返ってきて、IE以外では左で123、右で456が返ってきます。

valueプロパティとvalueアトリビュートは別物のようです。（IEは標準と違うということでとりえあず置いておきます。）

まとめ

こんな動きをしているようです。

• valueプロパティ（HTMLの特別な値）とvalueアトリビュート（DOMの一般的な属性）は違うもののようです。同じものを指していません。
• valueアトリビュートをセットしても、valueプロパティとは基本的に連動していません。
• ただし、valueプロパティが、フォームへの手入力や、Javascriptによる書き換えで変更されていないとき、デフォルトでvalueアトリビュートの値を返す。

こう表現してもいいかもしれません。

• 要するに element.setAttribute(“value”, “456”) とは element.defaultValue = “456” のこと。
• element.setAttribute(“value”, “456”) で element.defaultValue が変更される。
• element.value が変更されないうちは element.value と element.defaultValue は連動している。

なんとなくおしゃれな気がして element.setAttribute(“value”, “456”) なんて書くと、思わぬ結果になるかもしれないというお話でした。