文章目录
- ❄️一、BOM是什么
- ❄️二、BOM的核心有哪些
- 🧿window 对象——BOM核心
- 🍥Document对象
- 🎯Frames 对象
- 🥝Navigator 对象
- 🧫History对象
- 📀Location对象
- 🍪Screen对象
- ❄️三、BOM可以实现的功能
❄️一、BOM是什么
BOM（Browser Object Mode）浏览器对象模型，是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM。
- BOM有一系列对象组成，是访问、控制、修改浏览器的属性的方法
- BOM没有统一的标准(每种客户端都可以自定标准)。
- BOM的顶层是window对象
总体来说，BOM主要针对的是浏览器窗口和子窗口，但是通常会把任何特定于浏览器的扩展都归于在BOM的范畴内。
❄️二、BOM的核心有哪些
BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象（例如screen对象、history对象等）都是该对象的子对象。
🧿window 对象——BOM核心
Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。
window对象包括六个子对象：document，frames，history，location，navigator，screen
window常用的对象属性
| 属性 | 说明 |
|---|---|
| window | 包含了对窗口自身的引用。等价于self属性。 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| closed | 返回窗口是否已被关闭。 |
| top | 返回最顶层的先辈窗口。 |
| status | 设置窗口状态栏的文本。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| screenLeft | 只读整数。声明了窗口的左上角在屏幕上的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。 |
| screenTop | 同上 |
| screenX | 同上 |
| screenY | 同上 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| innerheight | 返回窗口的文档显示区的高度。 |
| innerwidth | 返回窗口的文档显示区的宽度。 |
| length | 设置或返回窗口中的框架数量。 |
| name | 设置或返回窗口的名称。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| outerheight | 返回窗口的外部高度。 |
| outerwidth | 返回窗口的外部宽度。 |
window对象常用方法
| 方法 | 说明 |
|---|---|
| onload() | 当页面完全加载到浏览器上时，触发该事件。 |
| onscroll() | 当窗口滚动时触发该事件。 |
| onresize() | 当窗口大小发生变化时触发该事件。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| clearTimeout() | 取消由setTimeout()方法设置的定时器。 |
| vlearInterval() | 取消由setInterval()设置的定时器。 |
🍥Document对象
DOM 可以认为是 BOM 的一个子集，DOM 中文档操作相关对象，如：Node、Document、Element 等 DOM 节点类型对象，都是做为window对象的子属性出现的。
document 是 window 对象的子属性，它是一个 Document 对象实例，表示当前窗口中文档对象。通过该对象，可以对文档和文档中元素、节点等进行操作。
🎯Frames 对象
frames 对象是一个集合，表示当前页面中使用的子框架。如果页面中使用了框架，将产生一个框架集合 frames ，在集合中可以用数字下标（从0开始）或名字索引框架。集全中的每一个对象，包含了框架的页面布局信息，以及每一个框架所对应的 window 对象。
🥝Navigator 对象
navigator 是指浏览器对象，该对象提供了当前正在使用的浏览器的信息。navigator 对象中的属性是只读的，在 W3C 在HTML5 标准中，对该对象进行了规范。由于浏览器的同，该对象的具体值可能有所区别。
🧫History对象
history 对象来保存浏览器历史记录信息，也就是用户访问的页面。浏览器的前进与后退功能本质上就是 history 的操作。history 对象记录了用户浏览过的页面，通过该对象提供的 API 可以实现与浏览器前进/后退类似的导航功能。
📀Location对象
location是一个静态对象，该对象是对当前窗口URL地址的解析。该对象提供了可以访问URL中不同部分的信息属性，通过location对象也可以实现页面或锚点跳转等功能。
🍪Screen对象
screen对象中包含了用户显示器屏幕相关信息。通过该对象，可以访问用户显示器屏幕宽、高、色深等信息。
❄️三、BOM可以实现的功能
BOM的主要功能：
- 弹出新浏览器窗口
- 移动、关闭和更改浏览器窗口大小
- 可提供Web浏览器详细信息的导航对象
- 可提供浏览器载入页面详细信息的本地对象
- 可提供用户屏幕分辨率详细信息的屏幕对象
- 支持Cookie
总结：
BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！！！
⭐最后⭐
🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言
