BOM是什么? BOM核心有哪些?可以实现哪些功能?

文章目录

  • ❄️一、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的强大功能!!!

⭐最后⭐

欢迎点赞 收藏 ⭐留言评论 私信必回哟
博主将持续更新学习记录收获,友友们有任何问题可以在评论区留言

你可能感兴趣的:(javascript,前端,html)