JavaScriptでフォーム入力を扱うとき、私は最初、入力した文字は一度、inputタグの中に入るのだと思っていました。
<input>
この入力欄に「東京」と入力した場合、内部的には次のようになるイメージです。
<input>東京</input>
しかし、これは間違いでした。
input要素に入力された文字は、タグの中身として保存されるのではありません。
入力内容は、input要素が持つvalueプロパティに保持されます。JSが内部で勝手に用意してくれるんですね。
const input = document.querySelector("input");
const value = input.value;
このときvalueに入るのは、入力欄に入力されている文字列です。
input要素には最初からvalueプロパティがある
重要なのは、JavaScriptで自分からvalueプロパティを作っているわけではないことです。
HTMLに次のように書くと、
<input>
ブラウザはこのinput要素をDOM上のオブジェクトとして作ります。
そのDOMオブジェクトには、ブラウザによって最初からvalueプロパティが用意されています。
そのため、JavaScriptでは次のように書けます。
const input = document.querySelector("input");
console.log(input.value);
まだ何も入力されていなければ、input.valueは通常、空文字列です。
""
ユーザーが文字を入力すると、その内容がvalueプロパティに反映されます。
タグの中身とプロパティは別物
次のp要素では、文字列は開始タグと終了タグの間にあります。
<p>東京</p>
JavaScriptでは、textContentで取得できます。
const p = document.querySelector("p");
console.log(p.textContent);
一方、input要素は、開始タグと終了タグの間に入力内容を持つ要素ではありません。
<input>
入力内容はtextContentではなく、valueから取得します。
const input = document.querySelector("input");
console.log(input.value);
つまり、次の2つは扱っているものが違います。
p.textContent
これは、要素の中にある文字列を扱います。
input.value
これは、入力欄が現在持っている値を扱います。
なぜinput.valueと書けるのか
次のコードは、HTML内で最初に見つかったinput要素を取得します。
const input = document.querySelector("input");
このinput変数に入るのは、文字列のdocument.querySelector("input")ではありません。
ブラウザが作ったinput要素のDOMオブジェクトです。
そのDOMオブジェクトには、最初からvalueプロパティがあります。
そのため、次のように入力値を取得できます。
const value = input.value;
まとめ
<input>に入力した文字は、タグの中に格納されるわけではありません。
ブラウザが作ったDOMオブジェクトのvalueプロパティに保持されます。
const input = document.querySelector("input");
const value = input.value;
input.valueは、自分で作った変数ではありません。
input要素がDOMとして作られた時点で、ブラウザによって最初から用意されているプロパティです。