JavaScript - 【注意】getAttribueのvalue値は初期値を返す

JavaScriptで入力ボックス等のフォーム部品の値を取得する場合、 getAttribute()メソッドの使用には注意してください。

getAttribute()でvalue値を取得すると、 現在の値ではなく、初期値を返します。

具体的に見ていきましょう。

HTML

テキスト入力ボックスを用意します。

<form>
	<input type="text" id="test" value="first" />
</form>

JavaScript

入力ボックスの値を、valueプロパティとgetAttribute('value')の2通りの方法で取得します。

var elem = document.getElementById('test');

console.log(elem.value); // first

console.log(elem.getAttribute('value')); // first

// value値を変更
elem.value = 'second';

console.log(elem.value);  // second

console.log(elem.getAttribute('value')); // first

「value値を変更後」の違いに注目してください。

「elem.value」は変更後の値('second')を返しますが、

「getAttribute('value')」は初期値('first')を返します。

変更後の値を取得したい場合は、valueプロパティを使わないと 思うような結果が得られません。

この点に注意してください。