回答編集履歴

1 調べる流れを修正

miyabi-sun

miyabi-sun score 17147

2018/09/18 17:33  投稿

> document.getElementById()の返り値について
お、良い所に気が付きましたね。
こんな時のためのMDNです。
このサイトの情報はかなり正確なので、事実上のリファレンスみたいな形で使えますし、回答者もこれのリンクをよく使っています。
どれどれ、getElementByIdは〜……見つけました。
[document.getElementById - MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById)
> elementは Element オブジェクトです。
大正解、推測の通り「Elementオブジェクト」です。
リンクがあるのでクリックしましょう、ぽち。
[Element - MDN](https://developer.mozilla.org/ja/docs/Web/API/Element)
valueプロパティなんてないですけど……だめみたいですね。
でもこんな一文が冒頭にあるのを見つけました。
> 特異な挙動は Element から継承した特異なインターフェイスで記述します。例えば HTML 要素には HTMLElement インターフェイス、SVG要素には SVGElement インターフェイスなど。
ほうほう、HTMLの要素に従ったElementのインスタンスが帰ってくるみたいですね。
「input element mdn」で…簡単に出てきましたね。
[<input>: 入力欄 (フォーム入力) 要素 - MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input)
試しに[HTMLElement](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement)のページに飛んで、
更に左下の「HTML DOM に関連するページ」から[HTMLInputElement](https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement)にジャンプ
valueプロパティが存在することを確認し、
プロパティ名でアクセスし、新しい値を代入することも可能なようです。
> string: Returns / Sets the current value of the control.
> `Note: If the user enters a value different from the value expected, this may return an empty string.`
英語なので意訳します。
valueプロパティはString型、要素のコントロールにつながっており、
`E.value`で文字列を取り出す事ができる他、
`E.value = "new input"`で代入することで新しい値をセットすることが可能。
※ユーザーが期待値と異なる値を入力すると、空の文字列が返されることがある。
このようにMDNのサイトから情報を引き出せるととてもはかどりますので、
回答文と同じような流れで調べてみてください。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る