JavaScript: window と document の違い
JavaScript において、window は Window オブジェクトへの参照を表し、 document は Document オブジェクトへの参照を表します。
Window オブジェクト、Document オブジェクトはどちらも
クライアントJavaScript において非常に重要なオブジェクトです。
最上位に位置するオブジェクトが Window オブジェクトであり、
Window オブジェクトはグローバルオブジェクトです。
Document オブジェクトは主に DOM ツリーへのアクセスに利用されます。 Document オブジェクトでよく使うメソッドの例として、getElementByID() メソッドがあります。
Window オブジェクトのプロパティの1つとして、window、document プロパティがあり、 それぞれ Window オブジェクト、Document オブジェクトへの参照を表します。
Window オブジェクトの主なプロパティには次のようなプロパティがあります(一部)
プロパティ | 説明 |
---|---|
document | Document オブジェクトへの参照 |
event | Event オブジェクトへの参照 |
window | Window オブジェクトへの参照 |
console | Console オブジェクトへの参照 |
navigator | Navigator オブジェクトへの参照 |
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」と記述する