window对象和document对象有什么区别？

在前端开发中，window对象和document对象都是非常重要的概念，但它们扮演着不同的角色：

• window对象: 代表整个浏览器窗口或标签页。它是全局对象，这意味着所有全局变量、函数以及其他JavaScript对象都是它的属性。它提供了与浏览器窗口本身交互的方法和属性，例如控制窗口大小、滚动位置、打开新窗口等等。

• document对象: 代表当前HTML文档。它是window对象的一个属性 (window.document)，提供了对HTML文档内容的访问和操作方法，例如获取元素、修改文本、添加事件监听器等等。 它本质上是DOM（文档对象模型）的根节点。

简单来说：

• window 是房子的框架，包括窗户、门以及整个结构。
• document 是房子里的内容，例如家具、墙壁、装饰等等。

以下是更详细的区别：

特性	window 对象	document 对象
代表什么	整个浏览器窗口/标签页	当前HTML文档
作用域	全局作用域	文档作用域
访问方式	直接使用 window 或省略	window.document 或 document
功能	控制窗口、导航、历史、屏幕信息等	操作HTML元素、文本内容、事件等
示例方法/属性	window.innerWidth, window.innerHeight, window.location, window.alert(), window.open()	document.getElementById(), document.querySelector(), document.createElement(), document.title

举例说明：

• 如果你想改变浏览器窗口的标题，你会使用window.document.title = "新标题"; 注意这里虽然操作的是document.title，但它是通过window对象访问的。
• 如果你想获取用户的屏幕分辨率，你会使用window.screen.width 和 window.screen.height。
• 如果你想在页面中找到一个特定的HTML元素，你会使用document.getElementById("元素ID")。

理解window和document的区别对于编写有效的JavaScript代码至关重要，它可以帮助你更好地操作浏览器和HTML文档。