Javascript 在.setAttribute vs.attribute=后面发生了什么？

说明：

<input name="testinput" value="" type="text" />

var input = document.getElementByTagName('input')[0];
input.value = "5"

console.log(input.value) // returns "5"
console.log(input.getAttribute("value")) // returns ""

我正在使用simple

javascript

设置

输入的值。我使用的多种方法看起来相同，但结果不同。以下是一个例子：

HTML:

<input name="testinput" value="" type="text" />

var input = document.getElementByTagName('input')[0];
input.value = "5"

console.log(input.value) // returns "5"
console.log(input.getAttribute("value")) // returns ""

当然，当使用
setAttribute（）
函数时，功能是相反的。然而，在表单提交时，它们都给出了
input=5
结果

问题：

<input name="testinput" value="" type="text" />

var input = document.getElementByTagName('input')[0];
input.value = "5"

console.log(input.value) // returns "5"
console.log(input.getAttribute("value")) // returns ""

将这两个属性分开有什么意义？
.value
的存储方式是否与
.getAttribute（“value”）
不同

免责声明：

<input name="testinput" value="" type="text" />

var input = document.getElementByTagName('input')[0];
input.value = "5"

console.log(input.value) // returns "5"
console.log(input.getAttribute("value")) // returns ""

我读过：





这两个问题/答案都让我感到困惑和不满意
 
input.value
是点表示法，它设置输入对象的
value
属性

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

如果出于某种原因，您必须更新属性，您可以这样做

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

但是您不应该使用它，因为您通常应该使用属性，而不是属性，并且您应该设置并获取
值
属性，而不是属性


HTML中的属性是在开始和结束括号内的键/值对，如中所示

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



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

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

getAttribute
从HTML中获取实际属性，而不是属性，而
元素。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
属性镜像
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

其他要素
以下是属性及其相应属性的（部分）列表：

元素|属性|属性
---------+-----------+----------------
选项|选定|默认选定（bool）
标签|表示| htmlFor
输入|选中|默认选中（bool）
选择|多个|多个（bool）
li |值|值（int）

如您所见，虽然属性始终是字符串，但相应的属性可能是其他类型。
您的编辑正是我想要的。我没有将内部对象与html对象分开。@Phil-属性和属性可能很难理解，在许多情况下，它们看起来是一样的，因为它们紧密地结合在一起，但它们实际上是两个不同的东西，如图所示，即使它们似乎代表同一事物，它们也可以有不同的名称和值。接下来的问题是，如果我使用
document.createElement（）
为其添加属性，并将其添加到页面中，它是像
html
对象一样处理还是仅仅是一个内部对象？如果添加一个属性，就像使用setAttribute一样，它被视为一个html属性，但是如果设置属性，它就位于内部对象上。你可以测试一下，看看这个->我喜欢上面的解释。我想补充一点，MDN的文档支持这一点，并鼓励在适用时使用properties而不是.attribute或setAttribute（）：解释得很好。我不知道有一系列的作业。很酷，谢谢你@菲尔：事实上，我解释得不够清楚。。更新了答案：）这是有趣的阅读！有趣的是，上周我有一些代码正在为使用
createElement
创建的
li
元素设置
.value
。
值
属性设置正确。。。但该值被解析为整数！当我切换到
setAttribute
时，问题消失了。（值字段是从数据库中提取的guid。）我不再有代码，因为这是一些功能的原型；现在，我的属性与knockout.js绑定，但这一发现令人惊讶。@BrianS是对的，因为
值与
结合使用，以指示项目符号应该包含的数字：）funnysee