質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.98%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,684

newyee

score 151

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript本格入門</title>
</head>
<body>
<form>
  <div>
    <label for="name">サイト名:</label><br />
    <input id="name" name="name" type="text" size="30" />
  </div>
  <div>
    <label for="url">URL:</label><br />
    <input id="url" name="url" type="url" size="50" />
  </div>
  <div>
    <input id="btn" type="button" value="追加" />
  </div>
</form>
<div id="list"></div>
<script src="append_child.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('btn').addEventListener('click', function() {
    var name = document.getElementById('name');
    var url = document.getElementById('url');
    console.log(url);
    var anchor = document.createElement('a');


    anchor.href= url.value;


    var text = document.createTextNode(name.value);
    anchor.appendChild(text);
    var br = document.createElement('br');
    var list = document.getElementById('list');
    list.appendChild(anchor);
    // list.insertBefore(anchor, null);
    list.appendChild(br);
  }, false);
}, false);


javasciptの方のコード内なのですが、「anchor.href = url.value」「var text = document.createTextNode(name.value);」ここの2つの部分における、「value」はなんなのでしょうか?
以下、上記コードの2つの行では、返り値として、Elementオブジェクトが返っていると思うのですが、Elementオブジェクトのvalueプロパティということなのでしょうか?
「var name = document.getElementById('name');」 「var url = document.getElementById('url');」

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2018/09/18 17:05

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

    キャンセル

  • kei344

    2018/09/18 17:12

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

    キャンセル

  • newyee

    2018/09/18 17:18

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

    キャンセル

回答 2

checkベストアンサー

+3

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 18:14

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

    キャンセル

  • 2018/09/18 18:55

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

    キャンセル

  • 2018/09/18 19:58

    ありがとうございます!

    キャンセル

+1

今時なら、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/19 17:10 編集

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

    キャンセル

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

  • ただいまの回答率 89.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる