.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

注意属性和属性之间的区别很重要。

value 属性

<input> 的 value 属性在元素的 HTML 表示中可见，映射到 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"

其他元素

这是属性及其对应属性的（部分）列表：

element  | attribute | property
---------+-----------+----------------
option   | selected  | defaultSelected (bool)
label    | for       | htmlFor
input    | checked   | defaultChecked (bool)
select   | multiple  | multiple (bool)
li       | value     | value (int)

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

Answer 2

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

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

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

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

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

---

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

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

在很多情况下这样的属性会设置底层属性的初始值，而该属性是一个带有值的命名键，它附加到一个元素的内部模型，也就是我们用javascript访问的对象保存元素的模型和数据。

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

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