文档和窗口对象之间的差异

在本文中，我们将看到 Document 对象和 Window 对象，它们的各种属性和方法，以及它们的实现和它们之间的区别。

文档对象：文档对象表示在浏览器中加载的网页。通过访问文档对象，我们可以访问 HTML 页面中的元素。借助文档对象，我们可以将动态内容添加到我们的网页中。可以使用window.document或仅使用文档来访问文档对象。

句法：

document.property_name;

常用的文档对象的属性如下表所示：

文件属性：

• activeElement ：它返回文档中当前活动的元素。
• body ：它返回 body 元素的内容。
• anchors ：它返回所有具有 name 属性的 元素。
• baseURI ：它返回一个字符串值，表示文档的基本 URI。
• cookie ：返回当前文档的cookie。
• charSet ：它返回一个字符串，表示文档的字符编码。
• defaultView ：它返回当前的窗口对象。
• designMode ：用于将文档设置为可编辑或只读。
• domain ：返回文档服务器的域名。
• doctype ：它返回文档的文档类型。
• embeds ：它返回所有嵌入元素的集合。
• URL ：它返回文档的完整 URL。
• forms : 它返回表单的所有元素。
• fullScreenElement ：它返回当前以全屏模式存在的元素。
• title ：它返回文档的标题元素。
• head ：它返回文档的 head 元素。
• links ：它返回所有具有 href 属性的 和 元素。
• lastModified ：返回当前文档最后一次修改的日期和时间。
• images ：它返回文档中 元素的集合。
• implementation ：它返回与当前文档关联的 DOMImplementation 对象。
• readyState ：返回当前文档的加载状态。
• referrer ：它返回链接到当前页面的页面的 URI。
• scripts ：它返回文档中存在的所有脚本元素。
• strictErrorChecking ：它设置或返回是否可以对文档强制执行严格的错误检查。

文件方法：

句法：

document.method_name;

下面列出了最常用的方法列表：

• addEventListener() ：用于将事件处理程序附加到指定元素。
• 采用节点（） ：用于采用另一个文档中的节点，它返回一个节点对象，表示采用的节点。
• close() ：用于关闭输出流。
• createAttribute() ：用于创建具有指定名称的属性节点，并返回属性对象。
• createComment() ：用于创建带有一些文本的评论节点。
• createDocumentFragment() ：用于创建文档片段以更改文档的内容。
• createElement() ：用于创建 HTML 元素。
• createEvent() ：用于创建新的事件对象。
• createTextNode() ：用于创建文本节点。
• execCommand() ：用于在可编辑的选定部分上执行用户指定的命令。它返回一个布尔值。
• fullscreenEnabled() ：用于检查文档是否可以在全屏模式下查看。它返回一个布尔值。
• getElementById() ：它返回给定 ID 的对象。如果不存在具有该 ID 的对象，则返回 null。
• getElementsByClassName() ：它返回一个对象，该对象包含文档中具有指定类名的所有元素作为对象。
• getElementsByName() ：它返回一个对象，该对象包含文档中具有指定名称的所有元素作为对象。
• getElementsByTagName() ：它返回一个对象，该对象包含文档中具有指定标签名称的所有元素作为对象。
• hasFocus() ：它返回一个布尔值，指示文档或元素是否具有焦点。
• importNode() ：它从当前文档的另一个文档中导入节点的副本。
• normalize() ：它刷新空节点并将相邻的文本节点与第一个文本节点合并，
• normalizeDocument() ：它用于通过删除任何空文本节点并连接相邻的文本节点来规范化 HTML 文档。
• open() ：用于打开输出流以收集输出。
• querySelector() ：它返回与文档中指定的 CSS 选择器匹配的第一个元素。
• querySelectorAll() ：它返回与文档中指定的 CSS 选择器匹配的元素子元素的集合
• removeEventListener() ：它从具有附加事件的元素中删除事件处理程序。
• renameNode() ：用于重命名节点。
• write() ：用于在文档中写入一些内容或javascript代码。
• writeln() ：用于在每个语句后写入一个字符的文档。

示例：此示例描述了 document.object 的实现。

HTML

 

    document's Properties
    
      h1 {
          color: green;
      }
    

 

     GeeksforGeeks
    CLICK ME
    
 
 
    
        function myFunction() {
            var title = document.title;
            var domain = document.domain;
            var body = document.body;
            document.getElementById("demo").innerHTML =
            "the title of the document is : "
            + title
            + "<br>"
            + "domain : "
            + domain
            + "<br>"
            + "body : "
            + body;
        }
    

 

---

输出：

窗口对象：窗口对象是 DOM 层次结构的最顶层对象。它表示显示网页内容的浏览器窗口或框架。每当屏幕上出现一个显示文档内容的窗口时，就会创建窗口对象。

句法：

window.property_name;

下表列出了常用的 Window 对象的属性：

窗口属性：

• Closed ：它保存一个布尔值，表示窗口是否关闭。
• console ：它返回对控制台对象的引用，该对象提供对浏览器调试控制台的访问。
• defaultStatus ：用于定义当浏览器不进行任何活动时将在状态栏中显示的默认消息。
• controllers ：它返回当前 Chrome 窗口的 XUL 控制器对象。
• customElements ：它返回对 CustomElementRegistry 对象的引用，该对象可用于注册新的自定义元素并获取有关已注册的自定义元素的信息。
• crypto ：它返回浏览器加密对象。
• devicePixelRatio ：它返回当前显示中物理像素和与设备无关的像素之间的比率。
• Document ：它返回对该窗口的文档对象的引用。
• DOMMatrix ：它返回对 DOMMatrix 对象的引用，该对象表示 4×4 矩阵，适用于 2D 和 3D 操作。
• frames[] ：它表示一个数组，其中包含给定窗口的所有帧。
• DOMPoint ：它返回对 DOMPoint 对象的引用，该对象表示坐标系中的 2D 或 3D 点。
• 历史：它提供有关在当前窗口中访问的 URL 的信息。
• Length ：表示当前窗口的帧数。
• DOMRect ：它返回对 DOMRect 对象的引用，该对象表示一个矩形。
• fullScreen ：此属性指示窗口是否全屏显示。
• 位置：它包含当前窗口的 URL。
• innerHeight ：用于获取浏览器窗口内容区域的高度。
• innerWidth ：用于获取浏览器窗口内容区域的宽度。
• Name ：它包含引用窗口的名称。
• Window ：它返回当前窗口或框架。
• Navigator ：它返回对导航器对象的引用。
• outerHeight ：它将获取浏览器窗口外部的高度。
• outerWidth ：它将获取浏览器窗口外部的宽度。
• 状态：它覆盖默认状态并在状态栏中放置一条消息。
• Top ：如果打开了许多窗口，它将返回对包含框架的最顶层窗口的引用。
• Toolbar ：它将产生工具栏对象，其可见性可以在窗口中切换。
• Opener ：它包含对打开当前窗口的窗口的引用。
• Parent : 它是指包含当前框架的框架集。
• Screen : 指屏幕对象
• Self ：它提供了另一种引用当前窗口的方法。

窗口方法：

句法：

window.method_name;

Window 对象常用的方法如下表所示：

• alert() ：用于显示警告框。它显示一条指定的消息以及一个确定按钮，通常用于确保信息来自用户。
• atob() ：用于解码 base-64 编码的字符串。它用于解码已使用 btoa() 方法编码的数据字符串。
• blur() ：用于从当前窗口移除焦点。
• btoa() ：用于以 base-64 格式对字符串进行编码。
• clearInterval() ：清除之前由 setInterval()函数设置的时间间隔。
• clearTimeout() ：它清除之前由 setTimeout()函数设置的超时。
• close() ：用于关闭之前打开的浏览器的某个窗口或选项卡。
• confirm() ：用于显示带有可选消息和两个按钮（即确定和取消）的模式对话框。如果用户单击“确定”，则返回 true，否则返回 false。
• focus() ：用于为当前窗口中的元素提供焦点。
• getComputedStyle() ：用于获取指定元素的所有计算 CSS 属性和值。
• getSelection() ：它返回一个 Selection 对象，表示用户选择的文本范围
• matchMedia() ：用于返回一个 MediaQueryList 对象，该对象表示指定 CSS 媒体查询字符串的结果。
• open() ：用于打开具有指定 URL 和名称的新选项卡或窗口。
• moveBy() ：用于移动相对于当前坐标具有指定像素数的窗口。
• moveTo() ：在窗口中用于从左上角坐标移动窗口。
• prompt() ：用于显示带有可选消息的对话框，提示用户输入一些文本
• resizeBy() ：它用于将窗口大小调整指定数量。
• resizeTo() ：用于将窗口大小调整为指定的宽度和高度。
• scrollBy() ：用于将文档滚动给定的像素数。
• scrollTo() ：用于滚动到文档中的一组特定坐标。
• setInterval() ：它在每个给定的时间间隔重复给定的函数。
• setTimeout() ：它在等待指定的毫秒数后执行一个函数。
• stop() ：用于停止窗口在当前浏览上下文中加载资源。

示例：此示例描述了 window.object 的实现。

HTML

 

     Window's Properties
    
        h1 {
            color: green;
        }
    

 

    GeeksforGeeks
    Check
    
 
 
    
        function show() {
            var h = window.innerHeight;
            var w = window.innerWidth;
            var l = window.location;
            var c = window.closed;
            document.getElementById("prop").innerHTML =
            "Frame's Height: "
            + h + "<br>"
            + "Frame's Width: "
            + w + "<br>"
            + "Window location:"
            + l
            + "<br>"
            + "Window Closed: "
            + c;
        }
    

 

输出：

文档和窗口的区别：

document	window
It represents any HTML document or web page that is loaded in the browser.	It represents a browser window or frame that displays the contents of the webpage.
It is loaded inside the window.	It is the very first object that is loaded in the browser.
It is the object of window property.	It is the object of the browser.
All the tags, elements with attributes in HTML are part of the document.	Global objects, functions, and variables of JavaScript are members of the window object.
We can access the document from a window using the window. document	We can access the window from the window only. i.e. window.window
The document is part of BOM (browser object model) and dom (Document object model)	The window is part of BOM, not DOM.
Properties of document objects such as title, body, cookies, etc can also be accessed by a window like this window. document.title	Properties of the window object cannot be accessed by the document object.
syntax:       document.propertyname;	syntax: window.propertyname;
example:      document.title :  will return the title of the document	example: window.innerHeight : will return the height of the content area of the browser