JavaScript: window と document の違い

JavaScript において、window は Window オブジェクトへの参照を表し、 document は Document オブジェクトへの参照を表します。

Window オブジェクト、Document オブジェクトはどちらも クライアントJavaScript において非常に重要なオブジェクトです。
最上位に位置するオブジェクトが Window オブジェクトであり、 Window オブジェクトはグローバルオブジェクトです。

Window オブジェクトの下位に Document オブジェクトや Event オブジェクト等の いろいろなオブジェクトがあります。

Document オブジェクトは主に DOM ツリーへのアクセスに利用されます。 Document オブジェクトでよく使うメソッドの例として、getElementByID() メソッドがあります。

Window オブジェクトのプロパティの1つとして、window、document プロパティがあり、 それぞれ Window オブジェクト、Document オブジェクトへの参照を表します。

Window オブジェクトの主なプロパティには次のようなプロパティがあります(一部)

プロパティ説明
documentDocument オブジェクトへの参照
eventEvent オブジェクトへの参照
windowWindow オブジェクトへの参照
consoleConsole オブジェクトへの参照
navigatorNavigator オブジェクトへの参照

document を window.document と書かない理由

本来であれば document は Window オブジェクトのプロパティですから、 「window.document」と記述するのですが、JavaScript では「window.」 の部分が省略できるようになっています。

ですから、「window.」の部分を省略して「document.getElementByID()」 のように記述します。

もちろん、省略せずに記述してもかまいませんが、通常は省略します。

JavaScript の開発過程でよく使う、console.log() も同じです。 上の表にある通り、 console は、Window オブジェクトの console プロパティのことであり、 Console オブジェクトへの参照です。

「window.console.log() 」と記述してもいいのですが、 通常は「window.」を省略して「console.log()」と記述します。

まとめ

以上の点をまとめると次のようになります。

  • Window オブジェクトは最上位(グローバル)オブジェクト
  • Document オブジェクトは Window オブジェクトの下に位置する
  • Document オブジェクトは主に DOM ツリーへのアクセスに使う
  • 「window.document」は「window.」を省略して「document」と記述する
JavaScript入門