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

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

ただいまの
回答率

88.05%

javascript 初心者 document.querySelector('')について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 809

score 7

初心者です

document.querySelector('') というコードが何故

document.document.querySelector('') とならないのか分りません

本にはdocument.querySelector('') のdocument.の部分がプロパティ、querySelector('')の部分がDocumentオブジェクトのメソッドと書かれていました
DocumentオブジェクトがWindowsオブジェクトのdocumentプロパティに入っているのは知っています

MDNサイトには
プロパティは objectName.propertyName
メソッドは  object.methodName()

と書かれていたので何故document.document.querySelector('')にならないか分かりません

よろしくお願いします

説明が下手だったかもしれないので追記します
querySelectorメソッドはwindowオブジェクトの中のdocumentプロパティの中のdocumentオブジェクトの中にあるのでコードに書く時、

document.document.querySelector('')   最初のwindowは省略できるのでこうなると思いました
でも正解はdocument.querySelector('')なので何故メソッド側のdocumentがないのかわかりません

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2020/01/26 21:02

    >document.document.
    なぜそう思うのか分かりません。「本」って書籍名は何なのでしょうか。
    本当にdocument.document.・・・となるように書いてあるのでしたら間違いなので出版元か著者に指摘しなければなりません。

    キャンセル

  • miyabi_takatsuk

    2020/01/27 11:43 編集

    もしかして、メソッドは、オブジェクトの中に必ず入るもの、と勘違いされてません?
    JavaScriptにおいては、メソッドもオブジェクトの一つです。
    また、documentはオブジェクトであるかつ、windowオブジェクトのプロパティのため、
    メソッドを持つことができます。
    なので、querySelectorメソッドを持っていますが。
    いや、"objectName"と"object"と表記が違うため混乱されているのでしょうかね?

    キャンセル

  • miyabi_takatsuk

    2020/01/27 11:49

    その引用元のMDNの記事のリンクを掲示してください。
    質問は修正できます。

    少なくとも、
    オブジェクトに関して記載があった、
    https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics
    には、質問者さんのおっしゃる、

    > MDNサイトには
    > プロパティは objectName.propertyName
    > メソッドは  object.methodName()

    のような記載はまったくありませんでしたので。

    キャンセル

回答 2

+9

document.の部分がプロパティ

windowのプロパティです。window.document.querySelectorと書いても動きます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+3

オブジェクトでの作業 - JavaScript | MDN
を参考にされて、

MDNサイトには
プロパティは objectName.propertyName
メソッドは  object.methodName()

というように混乱されたとエスパーして回答いたします。

おそらく、記事内の中段記載の、
object.methodname(params);
を見て、objectNameと、objectは別物というか、親子関係にあるのでは?と勘違いされたのではないでしょうか?
ですが、ここでは、オブジェクト内のメソッドの呼び出し方の一例を記載しているだけであって、
objectNameobject同じ扱いです。
(ただし、"同じ物"を指しているという意味ではない。object.methodname(params);は、オブジェクトのメソッドの呼び出し方の一例を記載しているに過ぎないということ。)

つまり、オブジェクトはオブジェクトであって、今回の質問の、
documentwindowもオブジェクトです。
そして、documentは、windowのプロパティであると同時に、オブジェクトでもあります。

JavaScript のオブジェクトは、自身に関連付けられたプロパティを持ちます。オブジェクトのプロパティは、オブジェクトに関連付けられている変数と捉えることができます。オブジェクトのプロパティは、オブジェクトに属するものという点を除けば、基本的に通常の JavaScript 変数と同じようなものです。オブジェクトのプロパティは、オブジェクトの特性を定義します。オブジェクトのプロパティには、単純なドット表記でアクセスします。

ここをもっと噛み砕いて理解する必要があるかと思います。
プロパティには、値も入れられれば、オブジェクトも入れられます。
また、JavaScriptにおいては、methodはオブジェクトの一種という扱いでもあります。
つまりは、参考にされた書籍の記載で混乱されたのかと思いますが、
プロパティ = オブジェクト = メソッド
という状況が成り立つ場合もあるということです。
よって、今回の質問に関しては、
documentオブジェクト自体が、querySelector()というメソッドオブジェクト(documentのプロパティとして)を持っているので、
document.document.querySelector()とはならず、
document.querySelector()となるということです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/27 22:29

    まだ完全には理解できてないですが詳しい回答ありがとうございました
    ベストアンサーにさせてもらいました

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る