为什么通过setAttribute或直接设置输入值之间的区别？

Question

在devtools中,运行以下两行:

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：（直接使用value属性设置值）

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