.setAttribute 与 .attribute= 背后发生了什么？

描述：

我正在使用简单javascript设置 a 的值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")?

免责声明：

我读过了：

• 何时在 JavaScript 中使用 setAttribute 与 .attribute=？ https://stackoverflow.com/questions/3919291/when-to-use-setattribute-vs-attribute-in-javascript
• 通过 property 或 setAttribute 设置属性 https://stackoverflow.com/questions/8018814/setting-a-property-via-property-or-setattribute

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

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

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

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

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

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

HTML 中的属性是左括号和右括号内的键/值对，如下所示

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

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

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

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