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"

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

1 个答案: