发生了什么.setAttribute vs .attribute =？

Question

说明

我使用简单javascript来设置input的值。我使用的方法似乎相同但结果不同。这是一个例子：

HTML：

<input name="testinput" value="" type="text" />

使用Javascript：

var input = document.getElementByTagName('input')[0];
input.value = "5"

console.log(input.value) // returns "5"
console.log(input.getAttribute("value")) // returns ""

当然，使用setAttribute()功能时，功能会反转。然而，在表单提交时，他们都给出input=5结果。

问题：

分离这两个属性有什么意义？ .value存储的内容是否与.getAttribute("value")不同？

声明：

我读过：

• When to use setAttribute vs .attribute= in JavaScript?
• Setting a property via property or setAttribute

这些问题/答案都让我感到困惑和不满意。

Answer 1

input.value是点表示法，它设置输入对象的value 属性 。

它决不会更新任何属性，因此尝试获取具有相同名称的属性 不 会返回更新后的值。

如果由于某种原因你必须更新属性，你会做

input.setAttribute('value', 'new_value');

但您不必使用它，因为您通常应该使用属性而不是属性，并且您设置并获取value属性，而不是属性。

---

HTML中的属性是开始和结束括号内的键/值对，如

<div attribute="attribute_value"></div>

在许多情况下，这样的属性将设置底层属性的初始值，并且属性是带有值的命名键，该值附加到元素的内部模型，这是我们使用javascript访问的对象持有元素的模型和数据。

更改任何对象键或值不会更改HTML，只会更改元素的内部表示形式，即对象。但是，更改HTML属性在某些情况下会更改元素的对象表示。

getAttribute从HTML中获取实际属性，而不是属性，而element.value清楚地访问表示该元素的对象中的命名属性。

Answer 2

注意属性和属性之间的差异非常重要。

value属性

value的{​​{1}}属性（在元素的HTML表示中可见）映射到<input> 属性。例如：

defaultValue

var i = document.createElement('input'); i.setAttribute('value', 'foo'); console.log(i.defaultValue, i.getAttribute('value')); // "foo foo" i.defaultValue = 'bar'; console.log(i.defaultValue, i.getAttribute('value')); // "bar bar" 属性

value属性镜像value属性（和defaultValue属性），直到明确赋值为止，因此：

value

这是另一种看待它的方式：

var i = document.createElement('input');
i.defaultValue = 'foo';
console.log(i.value); // "foo"

i.value = 'bar';
i.defaultValue = 'foo';
console.log(i.value); // "bar"

锚

使用锚点时，<input value="foo"> ↑↓ input.defaultValue = "foo"; ↓ input.value get(): value === undefined ? input.defaultValue : value set(newValue): value := newValue 属性和href属性会相互更新，但以不同的方式更新，例如：

href

其他元素

这是一个（部分）属性列表及其相应的属性：

var a = document.createElement('a');
a.setAttribute('href', '/test');
console.log(a.href); // "http://stackoverflow.com/test"

a.href = '/test';
console.log(a.getAttribute('href')); // "/test"

如您所见，虽然属性总是字符串，但相应的属性可能是其他类型。