浏览器对象模型的内涵是每个页面都是一个window对象,而dom是document为基准的模型,而document与wimdow.document指向相同,所以可以这么理解,bom模型的定义是包括dom模型在内的。
如下:
BOM是什么?
BOM == Browser Object Model == 浏览器对象模型。
js运行在浏览器中,每个页面都是一个window对象,主要关注点有以下:
- Window对象
- Screen
- Location
- History
- Navigator
- 对话框:alert,confirm,prompt
本质上来说,上面除了window对象,指向的都是window对象的属性或方法,如下图:
下面是一些简要说明:
1.Window
【说明】 所有浏览器均支持,表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是window对象的属性
- 全局函数是window对象的方法
为我们提供了操作浏览器的方法,比如关闭、开启页面,SPA中改变、禁用“后退”按钮。
一些常用的Window方法:
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
2.Screen
【说明】 每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息,对于移动开发来说,通过Screen对象可获知设备的分辨率、DPI、可用尺寸等信息
常用属性 | 描述 |
---|---|
height | 返回显示器屏幕的高度 |
width | 返回显示器屏幕的宽度 |
pixelDepth | 返回显示屏幕的颜色分辨率 |
availHeight | 可用高度(除开系统任务栏) |
availWidth | 可用宽度 |
3.Location
【说明】 Location 对象包含有关当前 URL 的信息。
常用属性 | 描述 |
---|---|
例子 | http://example.com:1234/test/test.htm#part2 |
hash | 设置或返回 #part2 |
host | 设置或返回 example.com:1234 |
href | 设置或返回 http://example.com:1234/test/test.htm#part2 |
protocol | 当前 URL 的协议 http: |
pathName | 当前访问路径 /test/test.htm |
方法 | 描述 |
---|---|
assign() | 加载新的文档 |
reload() | 重新加载当前文档 |
replace() | 用新的文档替换当前文档 |
4.History
【说明】 History 对象包含用户(在浏览器窗口中)访问过的 URL。
常用属性 | 描述 |
---|---|
length | 返回浏览器历史列表中的 URL 数量 |
back() | 加载浏览器历史列表中的前一个 URL |
forward() | 加载浏览器历史列表中的下一个 URL |
go() | 加载浏览器历史列表中指定URL |