1. 介绍
浏览器对象模型(Browser Object Model)简称 BOM
BOM主要包括一下的对象模型:
- window:包括全局属性、方法,控制浏览器窗口相关的属性、方法;
- location:浏览器连接到的对象的位置(URL);
- history:操作浏览器的历史;
- navigator:用户代理(浏览器)的状态和标识(很少用到);
- screen:屏幕窗口信息(很少用到);
2. window对象
window对象在浏览器中可以从两个视角来看待:
视角一:全局对象。
✓ 我们知道ECMAScript其实是有一个全局对象的,这个全局对象在Node中是global;
✓ 在浏览器中就是window对象;视角二:浏览器窗口对象。
✓ 作为浏览器窗口时,提供了对浏览器操作的相关的API;
目前已经指定了对应的标准,称之为globalThis,
window对象的作用
- 第一:包含大量的属性,localStorage、console、location、history、screenX、scrollX等等(大概60+个属性);
- 第二:包含大量的方法,alert、close、scrollTo、open等等(大概40+个方法);
- 第三:包含大量的事件,focus、blur、load、hashchange等等(大概30+个事件);
- 第四:包含从EventTarget继承过来的方法,addEventListener、removeEventListener、dispatchEvent方法;
MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Window
查阅MDN是有许多符号
- 删除符号:表示这个API已经废弃,不推荐继续使用了;
- 点踩符号:表示这个API不属于W3C规范,某些浏览器有实现(所以兼容性的问题);
- 实验符号:该API是实验性特性,以后可能会修改,并且存在兼容性问题;
window常见的属性
window常见的方法
window常见的事件
3. location对象常见的属性
href: 当前window对应的超链接URL, 整个URL;
protocol: 当前的协议;
host: 主机地址;
hostname: 主机地址(不带端口);
port: 端口;
pathname: 路径;
search: 查询字符串;
hash: 哈希值;
4. Location对象常见的方法
- assign:赋值一个新的URL,并且跳转到该URL中;
- replace:打开一个新的URL,并且跳转到该URL中(不同的是不会在浏览记录中留下之前的记录);
- reload:重新加载页面,可以传入一个Boolean类型;
5. URLSearchParams
常见的方法有如下:
get:获取搜索参数的值;
set:设置一个搜索参数和值;
append:追加一个搜索参数和值;
has:判断是否有某个搜索参数;
https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
中文会使用encodeURIComponent和decodeURIComponent进行编码和解码
6. history对象常见属性和方法
history对象允许我们访问浏览器曾经的会话历史记录。
两个属性:
length:会话中的记录条数;
state:当前保留的状态值;
五个方法:
back():返回上一页,等价于history.go(-1);
forward():前进下一页,等价于history.go(1);
go():加载历史中的某一页;
pushState():打开一个指定的地址;
replaceState():打开一个新的地址,并且使用replace;