SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

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

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は標準と違うということでとりえあず置いておきます。)

まとめ

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

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

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

関連するメモ

コメント(1)

【Javascript】動的に生成したoption要素のtextが反映されない(IEで) その2 at softelメモ 2010年3月13日 14:13

[…] ちなみに、 element.setAttribute(“value”, “123″) はやりません。何が起きるか… […]