なぜ、setAttribute経由で入力の値を設定するか、直接入力の値を設定するかの違いはありますか？デベロッパーツールで

Question

、これら2つの行を実行します。なぜそれが異なり

1.

window.x = document.createElement("input"); 
x.type="text"; 
x.name="nm"; 
x.value="val"; 
x 
// <input type="text" name="nm"> 

2.

window.x = document.createElement("input"); 
x.type="text"; 
x.name="nm"; 
x.setAttribute("value", "val"); 
x 
// <input type="text" name="nm" value="val"> 

を印刷になるだろうか？どちらの場合でも値は適切に設定されているようです。プロパティとDOM属性の間に切断があるようです。

また、プロパティ.valueのゲッターは.getAttribute('value')の結果とは異なります。私はsetAttribute()一日中、.valueは古い値を返します。

Answer 1

両方のアプローチの主な違いは、基になるdefaultValueプロパティの設定です。 setAttributeを使用すると、defaultValueプロパティとvalueプロパティの両方が更新/設定されます。 .valueを使用すると、valueのプロパティのみが更新/設定されます。

動作1：（setAttributeメソッドを使用して設定値）

x.setAttribute("value","test"); 
x.defaultValue; //"test" 
x.value; //"test" 

動作2：値および値属性は、2つの異なるものがあるので

x.value = "test"; 
x.defaultValue; //"" 
x.value; //"test"