参考文章：前端对象和前端属性参考表（页面对象、页面属性）Window对象、Document对象、Navigator对象、Location对象、Screen对象、History对象、存储对象、常用事件
文章目录
前端常用对象及其范围解释Window 对象（浏览器窗口）Document 对象（网页内容——HTML文档）Element 对象（具体HTML元素、HTML标签）Navigator 对象（浏览器信息）Location 对象（浏览器的地址栏）Screen 对象（用户屏幕）History 对象（页面历史记录）存储对象 (localStorage/sessionStorage)（浏览器保存数据）对象之间的关系图示图示对象层级关系- Window 是最顶层对象，包含所有其他对象- Document 是 Window 的一个属性，表示窗口中加载的文档- Elements 是 Document 中的元素- Navigator、Location、Screen、History 都是 Window 的属性，提供不同的功能
层级关系具象解释- Window = 整个房子- Document = 房子中的一个房间- Elements = 房间中的家具- 其他对象 = 房子的各种功能系统（电力系统、供水系统等）
前端常用对象及其范围解释
Window 对象（浏览器窗口）
Window 对象代表整个浏览器窗口。它是所有JavaScript对象的顶层对象，也是全局环境。
+------------------------------------------+
| 浏览器窗口 (Window 对象) |
| +--------------------------------------+|
| | 地址栏、工具栏、标签栏等 ||
| +--------------------------------------+|
| | ||
| | 网页内容区域 (Document 对象) ||
| | ||
| | ||
| +--------------------------------------+|
| | 状态栏 ||
| +--------------------------------------+|
+------------------------------------------+
包括地址栏、工具栏、标签页等浏览器界面元素负责管理网页的显示区域控制弹窗、定时器、网络请求等功能是所有其他对象的"父对象"
Document 对象（网页内容——HTML文档）
Document 对象专指加载到浏览器窗口中的网页内容部分。它代表HTML文档本身。
+------------------------------------------+
| 网页内容区域 (Document 对象) |
| |
| |
|
... ||
||
|
...
|| |
| |
| |
| |
+------------------------------------------+
只包括网页内容区域（不包括浏览器的界面元素）从标签开始，包含页面中的所有HTML元素提供查找元素、修改内容、监听事件的方法
Element 对象（具体HTML元素、HTML标签）
Element 对象代表文档中的具体HTML元素，如段落、图片、表单等。
+------------------------------------------+
| 网页内容中的某个元素 (Element 对象) |
| +--------------------------------------+|
| | ||
| |
| | 这是一个元素的内容 ||
| |
| | ||
| +--------------------------------------+|
+------------------------------------------+
每个HTML标签在JavaScript中都表示为一个Element对象可以操作元素的内容、属性、样式和位置
Navigator 对象（浏览器信息）
Navigator 对象包含有关访问者浏览器的信息。
+------------------------------------------+
| 浏览器信息 (Navigator 对象) |
| |
| - 浏览器名称: Chrome |
| - 浏览器版本: 96.0.4664.110 |
| - 操作系统: Windows 10 |
| - 用户代理: Mozilla/5.0 ... |
| - 语言: zh-CN |
| - 是否在线: true |
| |
+------------------------------------------+
不对应页面的视觉部分提供关于浏览器类型、版本、操作系统等信息访问设备功能（如地理位置、摄像头等）的接口
Location 对象（浏览器的地址栏）
Location 对象代表当前页面的URL信息，对应浏览器的地址栏。
+------------------------------------------+
| 地址栏 (Location 对象) |
| https://www.example.com/path?query=123#section
| |
| - href: https://www.example.com/path?query=123#section
| - protocol: https: |
| - host: www.example.com |
| - pathname: /path |
| - search: ?query=123 |
| - hash: #section |
| |
+------------------------------------------+
对应浏览器顶部的地址栏包含当前页面的URL各个部分（协议、主机名、路径等）提供页面跳转功能
Screen 对象（用户屏幕）
Screen 对象包含有关用户屏幕的信息。
+------------------------------------------+
| |
| 显示器/屏幕 (Screen 对象) |
| +--------------------------------------+|
| | ||
| | - width: 1920px ||
| | - height: 1080px ||
| | - colorDepth: 24 ||
| | - orientation: landscape ||
| | ||
| +--------------------------------------+|
| |
+------------------------------------------+
超出浏览器范围，代表整个物理显示屏提供屏幕的宽度、高度、颜色深度等信息
History 对象（页面历史记录）
History 对象包含用户在当前浏览器标签页中访问过的页面历史记录。
+------------------------------------------+
| 历史记录 (History 对象) |
| |
| [页面1] <- [页面2] <- [当前页面] -> [?] |
| |
| - length: 3 |
| - 方法: back(), forward(), go() |
| |
+------------------------------------------+
对应浏览器的前进和后退按钮功能管理当前标签页的访问历史不显示具体URL，只能前进、后退或跳转到指定位置
存储对象 (localStorage/sessionStorage)（浏览器保存数据）
存储对象用于在浏览器中保存数据。
+------------------------------------------+
| 浏览器存储 (Storage 对象) |
| |
| localStorage: |
| +--------------------------------------+|
| | key1: value1 ||
| | key2: value2 ||
| | (持久存储，不会因关闭浏览器而删除) ||
| +--------------------------------------+|
| |
| sessionStorage: |
| +--------------------------------------+|
| | key1: value1 ||
| | (临时存储，关闭标签页后删除) ||
| +--------------------------------------+|
| |
+------------------------------------------+
不对应视觉元素数据保存在浏览器中，即使页面关闭也不会丢失(localStorage)或在会话结束时清除(sessionStorage)
对象之间的关系图示
图示
+----------------------------------------------+
| Window (全局对象) |
| |
| +------------------------------------------+ |
| | Document (网页内容) | |
| | | |
| | +----------+ +----------+ +----------+| |
| | | Element1 | | Element2 | | Element3 || |
| | +----------+ +----------+ +----------+| |
| | | |
| +------------------------------------------+ |
| |
| +------------+ +------------+ +----------+ |
| | Navigator | | Location | | Screen | |
| +------------+ +------------+ +----------+ |
| |
| +------------+ +----------------------+ |
| | History | | localStorage/ | |
| | | | sessionStorage | |
| +------------+ +----------------------+ |
| |
+----------------------------------------------+
对象层级关系
- Window 是最顶层对象，包含所有其他对象
- Document 是 Window 的一个属性，表示窗口中加载的文档
- Elements 是 Document 中的元素
- Navigator、Location、Screen、History 都是 Window 的属性，提供不同的功能
层级关系具象解释
- Window = 整个房子
- Document = 房子中的一个房间
- Elements = 房间中的家具
- 其他对象 = 房子的各种功能系统（电力系统、供水系统等）