javascript - .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清楚地访问表示该元素的对象中的命名属性。