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

Question

初心者です

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がないのかわかりません

Comments

[m.ts10806]

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

[miyabi_pudding]

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

[miyabi_pudding]

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

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

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

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

Answer 1

document.の部分がプロパティ

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

Answer 2

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

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

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

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

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

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

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

Comments

[quoodragon]

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