.setAttribute vs .attribute=背后发生了什么？
描述：
我使用简单的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
这两个问题/答案都让我感到困惑和不满意。
回答 2
Stack Overflow用户
发布于 2014-03-04 00:09:26
input.value是点符号，它设置输入对象的value 属性。
它不会以任何方式更新任何属性，所以尝试获取具有相同名称的属性时，不会返回更新后的值。
如果出于某种原因，您必须更新属性，您可以这样做
input.setAttribute('value', 'new_value');但是您不应该使用它，因为您通常应该使用属性，而不是属性，并且您将设置和获取value属性，而不是属性。
HTML中的属性是左方括号和右方括号中的键/值对，如
<div attribute="attribute_value"></div>在许多情况下，这样的属性将设置底层属性的初始值，该属性是一个带有值的命名键，该键附加到元素的内部模型，这是我们使用javascript访问的，该对象保存元素的模型和数据。
更改这些对象的任何键或值都不会更改HTML，只会更改元素和对象的内部表示。但是，在某些情况下，更改HTML属性会更改元素的对象表示形式。
getAttribute从超文本标记语言中获取实际的属性，而不是属性，而element.value则明确地访问表示该元素的对象中的命名属性。
Stack Overflow用户
发布于 2014-03-04 00:23:09
注意属性和属性之间的区别是很重要的。
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)正如您所看到的，尽管属性始终是字符串，但相应的属性可能是其他类型。
https://stackoverflow.com/questions/22151560
复制相似问题