javascript - Why does document.getElementById return an object that has a property called 'value'? -

i'm trying learn javascript , dom. based on examples on internet have created html:

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

then later in javascript code have line.

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

the code works well. i'm able change what's shown inside text input. i'm trying understand underlying code , how works. looked dom reference in https://developer.mozilla.org/en-us/docs/web/api/document.getelementbyid.

i can see method should return object element. however, element not contain property called value. notice there sub-object called htmlelement has sub-object htmlinputelement. , object contains property called value.

is code above somehow typecast child object? why value property work such?

htmlinputelement inherits htmlelement which, in turn, inherits element.

if object inherits object, have properties of object.

this means expects deal element can given htmlinputelement instead (since htmlinputelement has properties of element, ones too).

the object needs element can sit in dom tree (only nodes can that, , element inherits node). needs element can have id.

only types of element have value property can usefully change, code needs htmlinputelement (or kind of element value property), getelementbyid doesn't care that.

for further reading, see prototype-based programming.