持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情
Browser Object Model 浏览器对象模型
浏览器提供的一套操作浏览器窗口的属性和方法
BOM 的顶级对象是 window，定义的变量都在这个环境下
是一个对象, 当你打开一个页面的时候就有一个 window
所有和 BOM 相关的 API 都是 window.xxx
JS 代码书写的时候, 可以不写 window.
浏览器窗口尺寸
指的是 浏览器 可视窗口的尺寸
浏览器有可能会出现滚动条
浏览器滚动条时算浏览器的一部分的
在 MAC 电脑 上, 是不算的
两个属性
1. innerWidth
2. innerHeight
共同点: 包含滚动条的尺寸
console.log(window.innerWidth)；
console.log(window.innerHeight)；// 可以省略 window 不写
console.log(innerWidth)；
console.log(innerHeight)；
浏览器的弹出层
再 BOM 里面, 给我们提供了三个弹出层
可以再浏览器弹出一些信息
1. alert() 警告框
弹出一段提示文本
只有一个确定按钮
2. confirm() 选择框
弹出一段提示文本
有确定和取消两个按钮
3. prompt() 输入框
弹出一个提示文本
有一个 input 输入框
有确定和取消按钮
使用方法:
1. alert(): window.alert('提示文本')
返回值: undefined
2. confirm(): window.confirm('提示文本')
返回值: 布尔值
当用户点击确定的时候, 是 true
当用户点击取消的 hi 收, 是 false
3. prompt(): window.prompt('提示文本')
返回值:
如果用户点击确定, 那么就是文本框里面的内容
如果用户点击取消, 那么就是 null
var res = window.alert('这是一段提示文本')；
console.log(res) ；
var res = window.confirm('请选择')；
console.log(res) ；
var res = window.prompt('请输入一段文本') ；
console.log(res)；
相同点
会阻执行的程序
JS 是单线程操作
弹出层弹出以后, 如果用户没有点击按钮表示当前弹出层没有结束
直到用户操作以后, 才会继续向下执行代码
浏览器的地址栏(重点)
一个地址包含哪些内容
www.guoxiang.com?a=100&b=200#abc\
http 传输协议
?a=100&b=200 查询字符串(queryString)
#abc 哈希(hash)
window 下有个成员叫做 location
location 是一个对象, 里面存储着和网页地址所有内容相关的信息
hash: 当前页面的 hash 值
href: 是一个读写的属性(当前地址栏地址)
读: 获取当前打开的页面的地址(中文是 url 编码格式)
写: 设置当前打开的页面的地址(跳转页面)
search: 当前地址中的 查询字符串(queryString)
读: 查询到的是一个字符串
这个是其他页面跳转到当前页面的时候带来的信息
reload()方法
重新加载当前页面 等于点击刷新按钮
注意: 不能写在打开页面就能执行的地方
浏览器卷去的高度和宽度
当页面比窗口宽或者高的时候，
有一部分是随着滚动条的拖动会隐藏部分网页
上面隐藏的叫做 卷去的高度
左边隐藏的叫做 卷去的宽度
使用方法
- document.documentElement.scrollTop
2. document.body.scrollTop
使用必须要没有 DOCTYPE 标签
获取卷去的宽度:
1. document.documentElement.scrollLeft
2. document.body.scrollLeft
使用必须没有 DOCTYPE 标签
3. 兼容的写法
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
浏览器滚动到
通过 JS 代码指定 浏览器滚动到什么位置
- scrollTo()
使用方法: window.scrollTo({
top: 纵向坐标,
left: 横向坐标,
})
对象里面写几个值无所谓
特点: 可以依靠第三个配置项来决定是瞬间定位还是平滑滚动
behavior: 'smooth', 'instant'
缺点：不能决定滚动时间
今天是夏至，天气很炎热写作心情不是很高涨，但是还是挣扎着写完了 ，明天开始写 DOM
