BOM - Browser Object Model 浏览器对象模型
提供了一整套操作浏览器相关内容的属性和方法
- 特点
操作的都是和浏览器这个软件本身相关的内容(滚动条,地址栏,标签页,弹窗,…)
所有的BOM相关操作,在各个浏览器表现形式不一样
BOM操作一般都是window.xxx,书写的时候可以省略window不写
浏览器可视窗口大小
语法:
window.innerWidth
window.innerHeight
注意:获取的是包含滚动条在内的尺寸( Mac 除外)
浏览器的弹出层
- 提示框
语法:
window.alert(提示文本内容)
表现:一个弹框 + 提示文本 + 确定按钮
返回值:没有
- 确认框
语法:
window.confirm(提示文本内容)
表现:在alert的基础上+取消按钮
返回值:一个布尔值 确定=true 取消=false
- 输入框
语法:
window.prompt(提示文本内容)
表现:在confirm的基础上+输入框
返回值:如果点击确定,就是输入的内容(必然是一个字符串类型)
如果点击取消,就是null
- 三个弹出层的共同点
都会阻断浏览器页面渲染的继续执行
都会阻断WEBAPI的工作内容(分析代码)
浏览器的标签页
window.open(地址)
作用打开新的标签页,开启地址
window.close()
关闭当前标签页
浏览器隐藏的尺寸(浏览器滚动条定位)
- 隐藏的高度
语法:
documnet.documentElement.scrollTop
->有DOCTYPE标签的时候能获取到尺寸
document.body.scrollTop
->没有DOCTYPE标签的时候,能获取到尺寸
使用 || 的短路运算:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
- 隐藏的宽度
语法:
document.documentElement.scrollLeft
->有DOCTYPE标签的时候,能获取到尺寸
document.body.scrollLeft
-> 没有 DOCTYPE 标签的时候, 能获取到尺寸
使用 || 的短路运算
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
浏览器的常见事件
-
load
加载事件
时机:当页面所有外部资源(html,css,js,图片,视音频等)全部加在完毕后出发
一般:
-> 当你把 js 代码书写在 head 标签内的时候, 并且操作了页面元素需要加一个 window.onload 事件
=> 注意:
-> 因为这种 on 的形式绑定的事件, 只能绑定一个事件处理函数
-> 如果写了两个事件处理函数, 那么只能执行后面一个 -
resize
尺寸改变事件
时机:当页面可视窗口尺寸改变的时候触发,随时改变随时触发 -
scroll
滚动事件
时机:当页面滚动条滚的的时候触发,随时改变随时触发 -
浏览器滚动到
语法:window.scrollTo()
两种参数方式
1、 window.scrollTo(x, y)
-> x 表示横向位置
-> y 表示纵向位置
注意:必须传递两个参数,一个会报错
特点:只能瞬间定位,不能平滑滚动
2、 传递对象
window.scrollTo({
top: yyy,
left: xxx,
behavior: ‘smooth’
})
默认是瞬间定位秒,需要一个 key 叫做 behavior 来决定是平滑滚动