与带有/不带 value 属性的输入元素混淆

Question

I'm not new to HTML but I always get confused with input elements, below is some html:

<input id="firstTest" />
<input id="secondTest" value="Hello"/>

so for the firstTest input, I typed some text like "Hi",then do:

let firstInput = document.getElementById('firstTest');
console.log(firstInput.value)  //produces "Hi"

but for the secondTest input, I did the same thing but the value is always "Hello" and I can't type anything into the input field.

So my questions are:

Q1-why for the firstInput, I didn't specify a value attribute but the value can change depending on what I typed?

Q2-when I type sth into the field, what actually happened? How browser display the thing I type? does input object in DOM get its value property updated automatically then the browser displays the latest value on screen?

Q3-if input object in DOM get its value property updated automatically, why on the secondInput that has a value attribute couldn't get its value property updated automatically?

Answer 1

Q1-why for the firstInput, I didn't specify a value attribute but the value can change depending on what I typed?

The value HTML attribute serves only for the purpose of defining an initial value . input elements have a Javascript API, and in this, there is a value property (which you are using in your console.log). This value property constantly reflects whatever is in the input . If you want to know what is in the value attribute, there's two ways to find out:

el.getAttribute('value');

or, using the aforementioned API

el.defaultValue;

Q2-when I type sth into the field, what actually happened? How browser display the thing I type? does input object in DOM get its value property updated automatically then the browser displays the latest value on screen?

That's a matter of how the browser handles it internally. This is an implentation detail which is never relevant for the web developer. It is laid out in the specification for that element.

Q3-if input object in DOM get its value property updated automatically, why on the secondInput that has a value attribute couldn't get its value property updated automatically?

Given the code you show here, that cannot be the case. The only ways to disable typing in an input is if the input has a disabled or readonly attribute, or if someone has added a keydown listener that calls event.preventDefault() .

If this does not fully answer your question, please leave a comment stating what is remaining unclear or unanswered.