JavaScript 窗口对象和文档对象有何区别

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

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

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

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

JavaScript窗口

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

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

下面是涉及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和当前URL。

</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中， document对象 表示当前在Web浏览器中加载的网页。它提供了对页面内容的访问，以及用于操作该内容的方法。

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

下面是涉及document对象的一些常见任务的示例 –

获取文档标题：var docTitle = document.title;
获取文档的最后修改日期：var modified = 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 Window和Document之间的区别

以下表格突出显示了JavaScript窗口与JavaScript文档之间的区别 –

JavaScript的window	JavaScript的document
它代表当前的网页浏览器窗口。	它代表当前加载在窗口中的网页。
其属性包括location、history、innerWidth、innerHeight等。	其属性包括title、lastModified、body、head等。
JavaScript窗口方法有：open()、close()、scrollTo()、alert()等。	JavaScript窗口方法有：getElementById()、createElement()、querySelector()、querySelectorAll()等。
它在全局范围内可用。	它在全局范围内可用。
它是window的对象。	它是浏览器的对象。