BOM—Browser Object Model and DOM—Document Object Model

时间:2022-04-06 16:23:59

浏览器对象模型的内涵是每个页面都是一个window对象,而dom是document为基准的模型,而document与wimdow.document指向相同,所以可以这么理解,bom模型的定义是包括dom模型在内的。

如下:

BOM—Browser Object Model and DOM—Document Object Model

BOM是什么?

BOM == Browser Object Model == 浏览器对象模型

js运行在浏览器中,每个页面都是一个window对象,主要关注点有以下:

  1. Window对象
  2. Screen
  3. Location
  4. History
  5. Navigator
  6. 对话框:alert,confirm,prompt

本质上来说,上面除了window对象,指向的都是window对象的属性或方法,如下图:

BOM—Browser Object Model and DOM—Document Object Model

下面是一些简要说明:

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

5.Navigator