首页　>　文章列表　>　JavaScript 窗口和 JavaScript 文档有何不同？

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

287 2023-09-04

在JavaScript中，window对象代表当前的Web浏览器窗口，而document对象代表当前加载的网页窗口。

JavaScript 中的 window 对象提供对浏览器历史记录、位置以及其他允许我们与浏览器窗口本身交互的属性和方法的访问。它包含有关浏览器窗口的信息，例如大小、窗口包含的文档以及窗口的历史记录。

文档对象代表整个网页的结构，并提供对页面内容的访问以及操作该内容的方法。它包含有关页面内容的信息，例如 URL、标题、内容和链接。

例如，我们可以使用 document.getElementById() 方法通过 ID 获取对页面上元素的引用，或者使用 document.createElement() 方法创建新元素。我们还可以使用window对象来操作浏览器窗口，比如使用window.open()方法打开一个新窗口，或者使用window.scrollTo()方法滚动到页面的特定位置。

JavaScript 窗口

在 JavaScript 中，window 对象代表当前的 Web 浏览器窗口。它提供对浏览器历史记录、位置以及其他允许您与浏览器窗口交互的属性和方法的访问。

窗口对象是 JavaScript 中的全局对象，可在整个代码的所有上下文中使用。您可以使用 window 关键字直接访问它。

以下是涉及窗口对象的常见任务的一些示例 -

获取页面当前URL：var currentUrl = window.location.href;
获取浏览器窗口的宽度：var windowWidth = window.innerWidth;
获取浏览器窗口的高度：var windowHeight = window.innerHeight;
打开一个新窗口：window.open('http://www.example.com', '_blank');
关闭当前窗口：window.close();

语法

javascript 窗口的语法如下 -

window.propertyName

示例

在这个例子中，我们得到了三件事：窗口的innerHeight、innerWidth和currentUrl。

</head>
<body>
   <h2>JavaScript Window</h2>
   <p id="innerHeight"></p>
   <p id="innerWidth"></p>
   <p id="currentUrl"></p>
   <script>
      const height = document.getElementById('innerHeight');
      const width = document.getElementById('innerWidth');
      const url = document.getElementById('currentUrl');
      height.textContent = "innerHeight - " +
      window.innerHeight;
      width.textContent = "innerWidth - " +
      window.innerWidth;
      url.textContent = "currentUrl - " + window.location.href;
   </script>
</body>
</html>

JavaScript 文档

在 JavaScript 中，文档对象表示当前在网络浏览器中加载的网页。它提供对页面内容的访问以及操作该内容的方法。

文档对象是窗口对象的一个属性，也是 JavaScript 中的全局对象，这意味着它在整个代码的所有上下文中都可用。您可以使用 document 关键字直接访问它。

以下是涉及文档对象的常见任务的一些示例 -

获取文档标题：var docTitle = document.title;
获取文档的最后修改日期：var modded = document.lastModified;
获取文档的body元素：var bodyEl = document.body;
通过 ID 获取元素：var el = document.getElementById('my-element');
创建新元素：var newEl = document.createElement('div');

语法

JavaScript 文档的语法如下 -

document.propertyName

示例

在这个例子中，我们得到了三件事 -

<html>
<head>
   <title>Example- JavaScript Document</title>
</head>
<body>
   <h2> JavaScript Document </h2>
   <p id="title"></p>
   <p id="currentUrl"></p>
   <script>
      const p = document.getElementById('title');
      const url = document.getElementById('currentUrl');
      p.textContent = "Doc Title - " + document.title;
      url.textContent = "Doc CurrentUrl - " + document.location.href;
   </script>
</body>
</html>

JavaScript 窗口和文档之间的区别

下表重点介绍了 javascript 窗口与 javascript 文档的不同之处 -

JavaScript 的窗口	JavaScript 的文档
它代表当前的网络浏览器窗口。	它代表当前在窗口中加载的网页。
其属性包括位置、历史记录、innerWidth、innerHeight等	其属性包括title、lastModified、body、head等
JavaScript窗口方法有：open()、close()、scrollTo()、alert()等	JavaScript 窗口方法有：getElementById()、createElement()、querySelector()、querySelectorAll() 等
全球可用。	全球可用。
它是一个窗口对象。	它是浏览器的一个对象。