あまり意識して使い分けていなかったのですが、気になって調べた結果、 この違いをしっかり理解していないと恐ろしい結果になってしまうことに気づきました。 MDN(Mozilla Developer Network)、Javascriptの親玉のリファレンスを見ると、 element.setAttributeの項目について以下のように記述されています。
setAttribute() を使ってある属性、XUL や HTML の特別な値、および HTML の選択領域の変更は、属性がデフォルト値を特定している場合に一貫性の無い動作となります。現在の値にアクセスしたり、変更したりするにはプロパティを使用すべきです。具体例として、 elt .setAttribute(‘value’, val ) の代わりに elt .value を使用します。
小難しく書いてありますが簡単に言えば、デフォルト値が与えられているときにsetAttribute使うとその値を変更しても反映されないよ。
ということが書いてあります。例えばフォーム画面でユーザーが入力する前から
<input type="text" value="default">
このように値が入っているとこのフォームに”update”とか入力してもgetAttributeすると”default”が取得されてしまうのです。
このときにvalueを使って入ればきちんと”update”が取得されます。
