\r\n\r\n\r\n```\r\n```javascript\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n document.getElementById('btn').addEventListener('click', function() {\r\n var name = document.getElementById('name');\r\n var url = document.getElementById('url');\r\n console.log(url);\r\n var anchor = document.createElement('a');\r\n \r\n \r\n anchor.href= url.value;\r\n \r\n \r\n var text = document.createTextNode(name.value);\r\n anchor.appendChild(text);\r\n var br = document.createElement('br');\r\n var list = document.getElementById('list');\r\n list.appendChild(anchor);\r\n // list.insertBefore(anchor, null);\r\n list.appendChild(br);\r\n }, false);\r\n}, false);\r\n\r\n```\r\njavasciptの方のコード内なのですが、「anchor.href = url.value」「var text = document.createTextNode(name.value);」ここの２つの部分における、「value」はなんなのでしょうか？\r\n以下、上記コードの２つの行では、返り値として、Elementオブジェクトが返っていると思うのですが、Elementオブジェクトのvalueプロパティということなのでしょうか？\r\n「var name = document.getElementById('name');」 「var url = document.getElementById('url');」","answerCount":2,"upvoteCount":0,"datePublished":"2018-09-18T08:00:06.309Z","dateModified":"2018-09-18T08:17:40.982Z","acceptedAnswer":{"@type":"Answer","text":"> document.getElementById()の返り値について\r\n\r\nお、良い所に気が付きましたね。\r\nこんな時のためのMDNです。\r\nこのサイトの情報はかなり正確なので、事実上のリファレンスみたいな形で使えますし、回答者もこれのリンクをよく使っています。\r\n\r\nどれどれ、getElementByIdは〜……見つけました。\r\n[document.getElementById - MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById)\r\n\r\n> elementは Element オブジェクトです。\r\n\r\n大正解、推測の通り「Elementオブジェクト」です。\r\nリンクがあるのでクリックしましょう、ぽち。\r\n[Element - MDN](https://developer.mozilla.org/ja/docs/Web/API/Element)\r\n\r\nvalueプロパティなんてないですけど……だめみたいですね。\r\nでもこんな一文が冒頭にあるのを見つけました。\r\n\r\n> 特異な挙動は Element から継承した特異なインターフェイスで記述します。例えば HTML 要素には HTMLElement インターフェイス、SVG要素には SVGElement インターフェイスなど。\r\n\r\nほうほう、HTMLの要素に従ったElementのインスタンスが帰ってくるみたいですね。\r\n試しに[HTMLElement](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement)のページに飛んで、\r\n更に左下の「HTML DOM に関連するページ」から[HTMLInputElement](https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement)にジャンプ\r\n\r\n> string: Returns / Sets the current value of the control.\r\n> `Note: If the user enters a value different from the value expected, this may return an empty string.`\r\n\r\n英語なので意訳します。\r\n\r\nvalueプロパティはString型、要素のコントロールにつながっており、\r\n`E.value`で文字列を取り出す事ができる他、\r\n`E.value = \"new input\"`で代入することで新しい値をセットすることが可能。\r\n※ユーザーが期待値と異なる値を入力すると、空の文字列が返されることがある。\r\n\r\nこのようにMDNのサイトから情報を引き出せるととてもはかどりますので、\r\n回答文と同じような流れで調べてみてください。","dateModified":"2018-09-18T08:33:41.827Z","datePublished":"2018-09-18T08:13:25.551Z","upvoteCount":3,"url":"https://teratail.com/questions/147219#reply-221824"},"suggestedAnswer":[{"@type":"Answer","text":"今時なら、HTML Standardから仕様を追いかけるのが手っ取り早い気がします。\r\nHTMLElementからHTMLInputElementを辿るのは、プロトタイプチェーン的に順番が逆なので、お勧めしません。\r\n\r\n### input要素\r\n\r\nHTML Standardでinput要素を調べ、IDLを読む。\r\nhttps://momdo.github.io/html/input.html#the-input-element\r\n\r\n```\r\ninterface HTMLInputElement : HTMLElement {\r\n...\r\nDOMString value;\r\n```\r\n\r\n### HTMLInputElement\r\n\r\nHTMLInputElement はJavaScriptの世界では、 **DOM Interface Object** と呼ばれる特別なオブジェクトてす。\r\nMDNでは、各要素が持つインターフェースが示されている為、MDNのみで調べる事も可能です。\r\n\r\ninput要素からインターフェース「HTMLInputElement」を得る。\r\nhttps://developer.mozilla.org/ja/docs/Web/HTML/Element/input\r\nHTMLInputElementへ。\r\nhttps://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement\r\n\r\nRe: newyee さん","dateModified":"2018-09-18T11:04:08.002Z","datePublished":"2018-09-18T11:04:08.002Z","upvoteCount":1,"url":"https://teratail.com/questions/147219#reply-221865","comment":[{"@type":"Comment","text":"ありがとうございます。\r\n貼って頂きましたurlなど、参考にさせて頂きます。","datePublished":"2018-09-19T08:10:33.578Z","dateModified":"2018-09-19T08:10:44.226Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"JavaScriptに関する質問","url":"https://teratail.com/tags/JavaScript"},{"@type":"ListItem","position":3,"name":"JavaScript","url":"https://teratail.com/tags/JavaScript"}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップJavaScriptに関する質問
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

4394閲覧

document.getElementById()の返り値について

newyee
newyee

総合スコア213

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/09/18 08:00

編集2018/09/18 08:17

0

0

以下のコードについて、分からない部分があり、お聞きしたいです。

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');」

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x
x_x

2018/09/18 08:05

name,valueではなく、name.valueではないですか？
kei344
kei344

2018/09/18 08:12

質問とコードで違うコードを使用されないほうがよいのでは。「anchor.href = value」はJavaScriptコード中に出てきません。
newyee
newyee

2018/09/18 08:18

すみません。間違えていました。修正しました。
guest

回答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
miyabi-sun
miyabi-sun

総合スコア21553

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi-sun
miyabi-sun

2018/09/18 08:34

確かに！ページ左下のリンクから追えましたので回答文の流れを修正しました。 ありがとうございました。
newyee
newyee

2018/09/18 09:14

ご丁寧にご回答頂き、ありがとうございます。 僕の理解で合っているかどうか、ご確認頂ければ幸いなのですが、「var url = document.getElementById('url');」」ここの部分の返り値において、Elementオブジェクトが返されるのですが、Elementオブジェクトには「value」プロパティはないため、Elementオブジェクトを継承している、HTMLInputElementインターフェースを参照し、そこの「value」プロパティを、「var text = document.createTextNode(name.value);」ここで、使用している。←こののように理解しているのですが、合っていますでしょうか？
miyabi-sun
miyabi-sun

2018/09/18 09:55

正確には「document.getElementById('url')」のIDで検索した要素が`input`なので、 Elementオブジェクトを継承して生成しておいたHTMLInputElementを直接返します。 （ここでの継承はオブジェクト指向プログラミングの概念の話です） それ以外は合ってますよ。
newyee
newyee

2018/09/18 10:58

ありがとうございます！
guest

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

think49
think49

総合スコア18196

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

newyee
newyee

2018/09/19 08:10 編集

ありがとうございます。 貼って頂きましたurlなど、参考にさせて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップJavaScriptに関する質問

document.getElementById()の返り値について