是否可以更改 dom-element 属性类型？（数字、字符串等）

Question

考虑一个输入字段

<input type="number" id="output" disabled="true">

这样的事情可能吗？

var output = Document.getElementById("output");
output.value = Number(0);

我测试了它并没有效果（+= 运算符仍在连接字符串）。有没有办法改变dom-元素属性的变量类型？

行到底发生了什么

Document.getElementById("output").value = Number(0);

为什么对类型没有影响？

这是否仅适用于 Dom-objects，或者是否有其他情况也适用于这种不变性（或者我是否可以为变量主动定义它）？

PS：我知道我可以简单地使用一个临时变量来避免一般这样的问题，但我想知道为什么 DOM 属性不受 output.value = Number(0);

Answer 1

不应直接为 DOM 元素属性赋值，而应使用元素的 setAttribute 函数。

var output = Document.getElementById("output");
output.setAttribute('value',Number(0));

why does it have no effect on the type?

DOM 元素的属性是 HTML 的一部分，并且由于 HTML 结构，所有属性值都应始终被引用 (https://www.w3.org/TR/xhtml1/diffs.html#h-4.4)，因此对于您为属性设置的任何值都将存储为字符串。

这意味着，即使您在末尾显式地为属性 'value' 指定值 Number(0)，它也会像这样存储在 HTML 结构中：

<input type="number" id="output" disabled="true" value="0"/>

如您所见，它被引号括起来，这是属性值的字符串表示形式，对于 0，字符串表示形式为“0”，如果您尝试使用其他类型（例如对象）设置属性，您会有这样的东西。

//setting a custom attribute the value: {a:10}
document.getElementById('output').setAttribute('myattr',{a:10})

HTML:

<input type="number" id="output" disabled="true" myattr="[object Object]">

Is it possible to change dom-element property types? (Number, String etc.)