JavaScript 窗口和 JavaScript 文档有何不同？

什么是JavaScript 窗口？

该窗口位于 JavaScript 对象层次结构的根/顶层。它是 JavaScript 中的全局/根对象，是 Document 对象模型（DOM）的根对象；

什么是 JavaScript 文档？

文档是窗口对象内部的一个对象，我们使用文档对象在文档内部进行操作。

加载到浏览器中的第一件事是窗口，与该窗口相关的属性存储在窗口对象中。与窗口对象相关的属性有长度、内部宽度、内部高度、缓存等。

还有一个文档对象，那么它呢？

因此，在窗口加载后，该窗口内会加载一个文档（HTML、 PHP或其他文档），并且与该文档相关的属性存储在文档对象中。与文档对象相关的属性是标题、URL、cookie 等。

句法：

• 窗口对象：

window.propertyname;

• 文档对象：

document.propertyname
// OR
window.document.propertyname

示例 1：关注窗口对象。

Javascript

  

    
    
    
    Document

  

    
    
  
    
  
    
        window.document.bgColor = "aqua";
        const height = document.getElementById('innerheight');
        const width = document.getElementById('innerwidth');
        window.document.querySelector('h1').textContent = 
            "Welcome to window object";
        height.textContent = "innerheight - " + 
            window.innerHeight;
        width.textContent = "innerwidth - " + 
            window.innerWidth;
    

  

输出：

专注于窗口对象

示例 2：关注文档对象。

HTML

  

    
    
    
    Document object

  

    
    
  
    
  
    
  
    
        document.bgColor = "rgb(89, 135, 235)";
        const text = prompt('enter the text to appear on screen');
        const h1 = document.querySelector('h1');
        h1.textContent = text;
        const p = document.getElementsByClassName('details');
        p[0].textContent = "document type:" + 
              document.contentType;
        p[1].textContent = "url :" + document.bgColor;
        p[2].textContent = "title :" + document.title;
    

  

输出：

专注于文档对象

Document	Window
It represents the document loaded inside the window or browser.	It represents the browser window in which you are seeing the content.
The properties related to it are stored in the document object.	The properties related to it are stored in the window object.
It is loaded after the loading window because the window contains a document.	It is loaded before the document because window container document.
It is the root element of the document object model.	The window is the global element for all objects, functions, etc.
It is an object of window.	It is an object of the browser.
We can not access windows objects properties inside the document.	We can access document object properties inside the window.
logically: document:{ properties}	logically:     window:{         document:{properties}     }
Example: document.title will return the title of the document	Example: window.document.title will return the title of the document.