为什么document.getElementById返回一个具有名为'value'的属性的对象？

Question

我正在尝试学习JavaScript和DOM。根据互联网上的一些例子，我创建了这个HTML：

<input type="text" id="amount3">

然后在JavaScript代码中我有这一行。

document.getElementById("amount3").value= x;

代码效果很好。我能够改变文本输入中显示的内容。但现在我试图了解底层代码以及它是如何工作的。我在https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById中查找了一些DOM引用。

我可以看到该方法应该返回一个对象 Element 。但是，元素不包含名为value的属性。但我注意到有一个名为HTMLElement的子对象，它有一个子对象HTMLInputElement。该对象包含一个名为value的属性。

上面的代码是否以某种方式作为子对象进行类型转换？为什么value属性可以这样工作？

Answer 1

HTMLInputElement继承自HTMLElement，后者继承自Element。

如果一个对象继承自另一个对象，那么它将拥有该对象的所有属性。

这意味着任何期望处理Element的内容都可以改为HTMLInputElement（因为HTMLInputElement具有Element的所有属性，但有些属性Element额外的）。

对象必须是Node，因此它可以位于DOM树中（只有Element可以执行此操作，Node继承自Element）。它必须是id，因此它可以有value。

只有某些类型的元素具有可以有效更改的HTMLInputElement属性，因此您的代码也需要它是getElementById（或具有value属性的另一种元素），但{ {1}}并不关心这一点。

如需进一步阅读，请参阅Prototype-based programming。

Answer 2

不确定这是您正在寻找的。

'value'是HTMLInputElement原型的一个属性：

console.log(HTMLInputElement.prototype);

getElementById返回的元素是该原型的一个实例。

因此，您可以操纵其value属性。

Answer 3

在JavaScript中，有一种方法可以编写类似于面向对象设计的代码。 如果你想知道，你可以搜索JavaScript原型; （https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript）

HTMLInputElement的父级是HTMLElement;

例如，__proto__: HTMLElement

HTMLElement的父级是Element：

__proto__: Element