126

Window是主要的JavaScript對象根，也就是瀏覽器中的全局對象，也可以看作是文檔對象模型的根。您可以在大多數情況下（在瀏覽器中）以window的身份訪問它;

window.screen是關於物理屏幕尺寸的小型信息對象。

window.document或只是document是可見（或更好的：已渲染）文檔對象模型/ DOM的主要對象。

來源

2012-03-27 18:19:54

+26

文檔可以大於窗口 - 窗口是瀏覽器中的「可見」部分。 – Mandy 2014-06-05 06:45:23

+1

@Mandy一個html元素，如果它不是文檔的一部分是不可見的。您可以創建內聯框，只有當您將iframe附加到文檔時，其窗才完全不可見 – 2015-03-27 22:20:15

+0

無論您訪問的是哪個網頁，窗口對象是否都相同？該文檔是一個JavaScript對象，其中包含有關該網頁的信息？ – Costa 2016-07-14 21:17:15

37

window是實際的全局對象。

screen是屏幕，它包含有關用戶顯示的屬性。

document是DOM所在的位置。

來源

2012-03-27 18:17:53

+8

'document'也可以是'window.document'，'screen'可以'window.screen'和'window'可以'window.window'（或'window.window.window'）:-P – 2012-03-27 18:19:43

+21

我查過了並且window.window.window.window也可以使用; P – 2012-03-27 18:24:02

+3

@PeterAronZentai：這是因爲'window'是一個全局變量，它使它成爲全局'window'對象的一個屬性。 :-) – 2012-03-27 19:02:42

10

window包含了所有內容，因此您可以撥打window.screen和window.document來獲取這些元素。看看這個小提琴，漂亮，打印每個對象的內容：http://jsfiddle.net/JKirchartz/82rZu/

您還可以看到該對象的螢火/開發工具的內容是這樣的：

console.dir(window); 
console.dir(document); 
console.dir(screen);

window是一切的根本， screen只是屏幕尺寸，而document是頂級DOM對象。所以你可以把它看成是window像一個超級document ...

來源

2012-03-27 18:30:04 JKirchartz

1

窗口是被加載到瀏覽器的第一件事。此窗口對象具有大部分屬性，如長度，innerWidth，innerHeight，名稱（如果已關閉），其父項等。

文檔對象是您的html，aspx，php或其他將被加載到瀏覽器中的文檔。該文件實際上被加載到窗口對象中，並具有可用的屬性，如標題，URL，cookie等。這是什麼意思？這意味着如果你想訪問window.property的窗口屬性，如果它是文檔，它是window.document.property，它也可以簡稱爲document.property。

多見於：http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CVkTMIL7.dpuf

來源

2015-04-06 16:25:48

53

好了，窗口是被加載到瀏覽器的第一件事。此窗口對象具有大部分屬性，如長度，innerWidth，innerHeight，名稱（如果已關閉），其父項等。

那麼文檔對象呢？文檔對象是您的html，aspx，php或其他將被加載到瀏覽器中的文檔。該文件實際上被加載到窗口對象中，並具有可用的屬性，如標題，URL，cookie等。這是什麼意思？這意味着如果你想訪問window.property的窗口屬性，如果它是文檔，它是window.document。屬性也可以簡稱爲document.property。

這似乎很簡單。但是一旦引入IFRAME會發生什麼？

多見於：http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CwLGOk9c.dpuf

來源

2015-09-23 18:21:39

+3

誤導某人試圖學習基礎知識：「文檔對象是您的html，aspx，php或其他將被加載到瀏覽器中的文檔。」瀏覽器渲染HTML和CSS並執行JavaScript。瀏覽器看不到像PHP這樣的服務器端語言的文件。 – 2017-01-29 20:47:51

16

簡單地說，下面更詳細，

window是這方面的JS
執行上下文和全局對象document包含HTML
screen描述物理顯示器的全屏

請參閱有關這些對象的詳細信息W3C和Mozilla引用。三者之間最基本的關係是每個瀏覽器選項卡都有自己的window，並且window具有window.document和window.screen屬性。瀏覽器選項卡的window是全局上下文，因此document和screen指的是window.document和window.screen。有關這三個對象的更多細節如下，後面Flanagan's JavaScript: Definitive Guide。

`window`

每個瀏覽器標籤都有自己的頂級window對象。每個（和不建議使用的<frame>）元素也都有自己的window對象，嵌套在父窗口中。每個窗口都有自己獨立的全局對象。 window.window總是指window，但window.parent和window.top可能指的是封閉窗口，允許訪問其他執行上下文。除了下面描述document和screen，window屬性包括

setTimeout()和setInterval()結合事件處理程序定時器
location給出當前URL
history與方法back()和forward()給標籤的可變歷史
navigator描述瀏覽器軟件

`document`

每個window對象必須被渲染的對象document。這些對象會部分混淆，因爲分配了唯一標識時，HTML元素會添加到全局對象中。例如。在HTML代碼段

<body> 
    <p id="holyCow"> This is the first paragraph.</p> 
</body>

段落元件可以通過下列任一被引用：

window.holyCow或window["holyCow"]
document.getElementById("holyCow")
document.body.firstChild
document.body.children[0]

`screen`

的window對象也具有與描述的物理顯示特性的screen對象：

屏幕屬性width和height是全屏
屏幕屬性availWidth和availHeight省略工具欄

顯示渲染文檔的屏幕部分是JavaScript中的視口，這可能會讓人感到困惑，因爲我們在討論與操作系統的交互時稱爲屏幕的應用程序部分。任何document元素的getBoundingClientRect()方法將返回一個包含top，left，bottom和right屬性的對象，該屬性描述元素在視口中的位置。

來源

2017-01-29 23:43:47

+0

有一個使用文檔對象''window.onload'的等價指令。 – FilipeCanatto 2018-01-04 01:42:17

+0

@FilipeCanatto看到https://stackoverflow.com/questions/588040/window-onload-vs-document-onload – 2018-01-12 06:02:35

Javascript中的窗口，屏幕和文檔有什麼區別？

回答

`window`

`document`

`screen`

Javascript中的窗口，屏幕和文檔有什麼區別？

回答

window

document

screen

相關問題

`window`

`document`

`screen`