Q&A
name,valueではなく、name.valueではないですか？
以下のコードについて、分からない部分があり、お聞きしたいです。
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8" /> 5<title>JavaScript本格入門</title> 6</head> 7<body> 8<form> 9 <div> 10 <label for="name">サイト名：</label><br /> 11 <input id="name" name="name" type="text" size="30" /> 12 </div> 13 <div> 14 <label for="url">URL：</label><br /> 15 <input id="url" name="url" type="url" size="50" /> 16 </div> 17 <div> 18 <input id="btn" type="button" value="追加" /> 19 </div> 20</form> 21<div id="list"></div> 22<script src="append_child.js"></script> 23</body> 24</html>
javascript
1document.addEventListener('DOMContentLoaded', function() { 2 document.getElementById('btn').addEventListener('click', function() { 3 var name = document.getElementById('name'); 4 var url = document.getElementById('url'); 5 console.log(url); 6 var anchor = document.createElement('a'); 7 8 9 anchor.href= url.value; 10 11 12 var text = document.createTextNode(name.value); 13 anchor.appendChild(text); 14 var br = document.createElement('br'); 15 var list = document.getElementById('list'); 16 list.appendChild(anchor); 17 // list.insertBefore(anchor, null); 18 list.appendChild(br); 19 }, false); 20}, false); 21
javasciptの方のコード内なのですが、「anchor.href = url.value」「var text = document.createTextNode(name.value);」ここの２つの部分における、「value」はなんなのでしょうか？
以下、上記コードの２つの行では、返り値として、Elementオブジェクトが返っていると思うのですが、Elementオブジェクトのvalueプロパティということなのでしょうか？
「var name = document.getElementById('name');」 「var url = document.getElementById('url');」
質問とコードで違うコードを使用されないほうがよいのでは。「anchor.href = value」はJavaScriptコード中に出てきません。
すみません。間違えていました。修正しました。
回答2件
0
ベストアンサー
document.getElementById()の返り値について
お、良い所に気が付きましたね。
こんな時のためのMDNです。
このサイトの情報はかなり正確なので、事実上のリファレンスみたいな形で使えますし、回答者もこれのリンクをよく使っています。
どれどれ、getElementByIdは〜……見つけました。
document.getElementById - MDN
elementは Element オブジェクトです。
大正解、推測の通り「Elementオブジェクト」です。
リンクがあるのでクリックしましょう、ぽち。
Element - MDN
valueプロパティなんてないですけど……だめみたいですね。
でもこんな一文が冒頭にあるのを見つけました。
特異な挙動は Element から継承した特異なインターフェイスで記述します。例えば HTML 要素には HTMLElement インターフェイス、SVG要素には SVGElement インターフェイスなど。
ほうほう、HTMLの要素に従ったElementのインスタンスが帰ってくるみたいですね。
試しにHTMLElementのページに飛んで、
更に左下の「HTML DOM に関連するページ」からHTMLInputElementにジャンプ
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のサイトから情報を引き出せるととてもはかどりますので、
回答文と同じような流れで調べてみてください。
投稿2018/09/18 08:13
編集2018/09/18 08:33
総合スコア21158
質問はプロパティの話なので、こちらのほうが適切かと
https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement
確かに！ページ左下のリンクから追えましたので回答文の流れを修正しました。
ありがとうございました。
ご丁寧にご回答頂き、ありがとうございます。
僕の理解で合っているかどうか、ご確認頂ければ幸いなのですが、「var url = document.getElementById('url');」」ここの部分の返り値において、Elementオブジェクトが返されるのですが、Elementオブジェクトには「value」プロパティはないため、Elementオブジェクトを継承している、HTMLInputElementインターフェースを参照し、そこの「value」プロパティを、「var text = document.createTextNode(name.value);」ここで、使用している。←こののように理解しているのですが、合っていますでしょうか？
正確には「document.getElementById('url')」のIDで検索した要素が`input`なので、
Elementオブジェクトを継承して生成しておいたHTMLInputElementを直接返します。
（ここでの継承はオブジェクト指向プログラミングの概念の話です）
それ以外は合ってますよ。
ありがとうございます！
0
今時なら、HTML Standardから仕様を追いかけるのが手っ取り早い気がします。
HTMLElementからHTMLInputElementを辿るのは、プロトタイプチェーン的に順番が逆なので、お勧めしません。
input要素
HTML Standardでinput要素を調べ、IDLを読む。
https://momdo.github.io/html/input.html#the-input-element
interface HTMLInputElement : HTMLElement { ... DOMString value;
HTMLInputElement
HTMLInputElement はJavaScriptの世界では、 DOM Interface Object と呼ばれる特別なオブジェクトてす。
MDNでは、各要素が持つインターフェースが示されている為、MDNのみで調べる事も可能です。
input要素からインターフェース「HTMLInputElement」を得る。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
HTMLInputElementへ。
https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement
Re: newyee さん
投稿2018/09/18 11:04
総合スコア18162
あなたの回答
tips
プレビュー
