发生了什么.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")？

免责声明:

我读过了:

• 何时在JavaScript中使用setAttribute vs .attribute =？
• 通过property或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属性

在元素的HTML表示中可见的a的value属性将<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"

其他要素

这是一个(部分)属性列表及其相应的属性:

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

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