在前端开发中，我们经常需要处理网页中的窗口、屏幕和文档。虽然它们看起来很相似，但实际上它们有着不同的含义和用途。本文将详细介绍JavaScript中三者的区别，为你提供深度学习和指导意义。
窗口(window)
window对象代表当前浏览器窗口或标签页。它是全局对象之一，可以通过window关键字直接访问。在JavaScript中，window对象拥有大量的属性和方法，比如alert()、setTimeout()和localStorage等等。这些都是与浏览器窗口相关的功能。
以下是一些常见的窗口对象属性：
innerWidth和innerHeight：获取窗口内部视口的宽度和高度。outerWidth和outerHeight：获取浏览器窗口的宽度和高度。location：获取当前页面的URL信息。navigator：获取用户浏览器的信息。screen：获取显示器屏幕的信息。
示例代码：
-- -------------------- ---- ------- -- ---------- ----- ----- - ------------------ ----- ------ - ------------------- -- ------- ----- --------- - --------------------------------------- -- ------ ---------------展开代码
屏幕(screen)
screen对象代表用户的显示器屏幕。可以通过window.screen访问该对象。该对象包含有关屏幕大小和分辨率等信息。
以下是一些常见的屏幕对象属性：
width和height：获取屏幕的宽度和高度。availWidth和availHeight：获取可用工作区域的宽度和高度，不包括任务栏或其他系统UI元素。colorDepth：获取屏幕支持的颜色深度。pixelDepth：获取屏幕每个像素的位数。
示例代码：
// 获取屏幕的宽度和高度 const screenWidth = window.screen.width; const screenHeight = window.screen.height; // 获取工作区域的宽度和高度 const availWidth = window.screen.availWidth; const availHeight = window.screen.availHeight;
文档(document)
document对象代表当前网页的文档，可以通过document关键字访问。该对象提供了对网页内容的访问和控制。
以下是一些常见的文档对象属性：
documentElement：获取文档的根元素（通常是<html>）。body：获取文档的<body>元素。title：获取文档的标题。getElementById()：通过元素ID获取元素。getElementsByClassName()：通过类名获取元素。getElementsByTagName()：通过标签名获取元素。
示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------ -------- ------ ------------- ------- ------ ---- ----------------- ----------- --- -------------------- -- - -------------- -------- ------------------------------ -------------- --------- ---------- ------------- - --------------------------------------------- - ---- ------- --- ---------- ------- -------展开代码
上面的代码演示了如何使用document对象来获取元素并修改网页内容。当点击按钮时，changeTitle()函数将会获取ID为"title"的元素，并将其内容修改为"New Title"。
总结
本文介绍了JavaScript中窗口、屏幕和文档的区别。window对象代表当前
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9907
