认识BOM
认识 BOM - Browser Object Model 浏览器对象模型
1. 提供给我们一整套操作浏览器相关内容的属性和方法
2. 特点:
（1）操作的都是和浏览器这个软件本身相关的内容(滚动条, 地址栏, 标签页, 弹窗, …)
（2） 所有的 BOM 相关操作, 在各个浏览器表现形式不一样
（3） BOM 操作一般都是 window.xxxx, 书写的时候, 可以省略 window. 不写
BOM 初体验
控制浏览器的 弹窗 出现 ： alert(‘hello world’)
标准语法 ： alert(‘hello world’)
浏览器可视窗口大小
获取浏览器可视窗口的大小
语法:
（1） window.innerWidth
（2） window.innerHeight
注意: 获取的是包含滚动条在内的尺寸(MAC 除外)
console.log('浏览器可视宽度 : ', window.innerWidth, innerWidth)
console.log('浏览器可视高度 : ', window.innerHeight, innerHeight)
浏览器的弹出层
1.提示框
语法: window.alert(提示文本内容)
表现: 一个弹框 + 提示文本 + 确定按钮
返回值: 没有
var res = window.alert('你好 世界')
console.log(res)
2. 确认框
语法: window.confirm(提示文本内容)
表现: 在 alert 的基础上 + 取消按钮
返回值: 一个布尔值
(1) 如果点击的是 确定, 就是 true
(2) 如果点击的是 取消, 就是 false
var res = winder.confrim('你是谁')
console.log(res)
3. 输入框
语法: window.prompt(提示文本内容)
表现: 在 confirm 的基础上 + 输入框
返回值:
(1) 如果你点击确定, 就是 输入的内容(必然是一个字符串类型)
(2) 如果你点击取消, 就是 null
var res = window.prompt('你的银行卡密码是什么')
console.log(res)
三个弹出层的共同点
1. 都会阻断浏览器页面渲染的继续执行
2. 都会阻断 WEBAPI 的工作
(1) WEBAPI 的工作内容 : 分析代码
浏览器的地址栏
相对完整的地址
=> https://www.xhl.com:443/a/b/c/
login.html?username=admin&password=123456#abc
1. http(s) 传输协议
2. www.xhl.com 域名, 对应处一个 ip 地址, 找到 互联网世界 上的某一台电脑
3. :443 端口号, http 传输协议默认对应 80, https 传输协议默认对应 44310
4. /a/b/c/login.html 路径地址
5. ?username=admin&password=123456 查询字符串, 你访问当前文件的时候, 携带给当前文件的信息
6. #abc 哈希值(hash) 锚点, 进行网页定位使用 就是获取浏览器地址栏内的所有信息
window 下有一个对象叫做 location，里面存储的就是当前地址栏所有的相关信息
hash: "#aaa"
host: "www.baidu.com:443"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?a=100&b=200#aaa"
origin: "https://www.baidu.com:443"
pathname: "/index.html"
port: "443"
protocol: "https:"
search: "?a=100&b=200"
1. href
（1） 是一个读写的属性
读: 获取当前页面的完整地址
语法: window.location.href
写: 设置当前页面的浏览器地址
（2） 语法: window.location.href = ‘值’
// 1-1. href 获取
console.log(window.location.href)
// 1-2. href 设置
btn.onclick = function () {
window.location.href = 'https://www.baidu.com'
}
2.reload ()
是一个方法
1. 作用: 重新加载当前页面
2. 语法: window.location.reload()
3. 注意: 不要书写在打开页面就能执行的位置
window.location.reload()
btn.onclick = function () {
window.location.reload()
}
浏览器的标签页
1.打开新的标签页
语法: window.open(地址)
作用: 打开新的标签页, 开启地址
2.关闭当前标签页
语法: window.close()
作用: 关闭当前标签页
on.onclick = function () {
// 1. 开启新的标签页
window.open('https://www.baidu.com')
}
off.onclick = function () {
// 2. 关闭标签页
window.close('https://www.baidu.com')
}
浏览器卷去的尺寸(浏览器滚动条定位)
卷去的高度
语法
1. document.documentElement.scrollTop
-> 有 DOCTYPE 标签的时候, 能获取到尺寸
2. document.body.scrollTop
-> 没有 DOCTYPE 标签的时候, 能获取到尺寸
兼容
1. 使用 || 的短路运算2..
2. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
console.log('卷去的高度 : ', document.documentElement.scrollTop)
console.log('卷去的高度 : ', document.body.scrollTop)
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
卷去的宽度
语法:
1. document.documentElement.scrollLeft
-> 有 DOCTYPE 标签的时候, 能获取到尺寸
2. document.body.scrollLeft
-> 没有 DOCTYPE 标签的时候, 能获取到尺寸
兼容
1. 使用 || 的短路运算
2. var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
console.log('卷去的宽度 : ', document.documentElement.scrollLeft)
console.log('卷去的宽度 : ', document.body.scrollLeft)
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
console.log(scrollLeft)
浏览器的常见事件
1.load
(1) 加载事件
(2) 时机: 当页面所有外部资源(html, css, js, 图片, 视音频等) 全部加载完毕后触发
(3) 一般:
-> 当你把 js 代码书写在 head 标签内的时候, 并且操作了页面元素
-> 需要加一个 window.onload 事件
(4) 注意:
-> 因为这种 on 的形式绑定的事件, 只能绑定一个事件处理函数
-> 如果你写了两个事件处理函数, 那么只能执行后面一个
window.onload = function () {
console.log('页面全部加载完毕了')
}
2.resize
(1) 尺寸改变事件
(2) 时机: 当页面可视窗口尺寸改变的时候, 触发, 随时改变随时触发
window.onresize = function () {
console.log('尺寸改变了')
if (window.innerWidth >= 768) {
alert('竖屏体验更佳 ^_^')
}
}
3. scroll
(1) 滚动事件
(2) 时机: 当页面滚动条滚动的时候触发, 随时改变随时触发
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
}
浏览器滚动到
语法: window.scrollTo()
两种参数方式
1. 第一种: 传递数字
window.scrollTo(x, y)
-> x 表示横向位置
-> y 表示纵向位置
注意: 必须传递两个参数, 一个报错
特点: 只能瞬间定位, 不能平滑滚动
- 第二种: 传递对象
window.scrollTo({
top: yyy,
left: xxx,
behavior: ‘smooth’
})
默认是瞬间定位, 需要一个 key 叫做 behavior 来决定是平滑滚动
btn.onclick = function () {
// 1. 传递数字
window.scrollTo(100, 1560)
// 2. 传递对象
window.scrollTo({
top: 100,
left: 982,
behavior: 'smooth'
})
浏览器的本地存储
浏览器本地存储的数据分成几种
1. cookie
2. localStorage
3. sessionStorage
cookie
存储特点
- cookie 是按照域名存储的
(1) 本地打开的页面是无法存储 cookie 的必须在服务器打开
(2) 哪一个域名存储的 cookie 哪一个域名使用
- cookie 的存储大小
(1) 4KB 左右
(2) 50条 左右
- cookie 的存储都是字符串, 有自己的固定格式
(1) ‘key=value; key2=value2; key3=value3’
- cookie 的存储是有时效性的
(1) 默认时效性是 会话级别
(2) 我们可以手动设置过期时间
- cookie 的通讯相关
(1) 在前后端交互的时候
(2) 会在每一次和后端的 “对话” 中自动携带 cookie
6. 操作权限
(1) 前后端都可以操作 cookie
操作语法:
document.cookie
服务器打开
1 .借助 vscode 启动临时服务器打开页面
2.下载一个插件 live server
3. 打开页面的时候
点击 open with live server
设置一条基本的 cookie
1. 语法: document.cookie = ‘key=value’
2. 注意: 一次只能设置一条, 设置的默认就是 会话级别 的时效性
设置了一条叫做 a 的 cookie, 值是 100
document.cookie = ‘a=100’
设置一条带有过期时间 cookie
语法: document.cookie = ‘key=value;expires=’ + 时间对象
cookie 采用的时间规范
1. 不管你给他的是什么时间节点, 他都当做世界标准时间使用
2. 我们给到的是 11:35, cookie 会把 11:35 当做世界标准时间使用
3. 该条 cookie 会在世界标准时间 11:35 分过期
4. 因为我们时区的问题, 世界标准时间的 11:35 分, 就是我们的 19:35 分
+ 该条 cookie 会在今天晚上 19:35 分过期被自动删除
function setCookie(key, value, expires) {
if (expires) {
var time = new Date()
time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * expires)
}
document.cookie = `${ key }=${ value };expires=${ time }`
}
浏览器的本地存储 - storage
存储特点
1. 前后端操作
(1) 只能由前端操作
(2) 任何后端语言不能操作
2. 存储位置
(1) 浏览器本身
3. 通讯相关
(1) 不能自动携带
4. 存储大小
(1) 20M 左右
5. 时效性是不可设置的
(1) localStroage 是永久存储
(2) sessionStorage 是会话存储
6. 存储格式
(1) 按照键值对存储, 但是只能存储字符串类型的数据
(2) 如果你存储的是其他类型的数据, 会自动帮你转换成字符串存储
7. 操作 API
(1) 一套自己完整的操作语法
面试题
解释一下 cookie localStorage sessionStorage session 的区别
session 是一个后端的存储空间
cookie / localStorage / sessionStorage 的区别
1. 存储大小
(1) cookie: 4KB 左右
(2) stroage: 20M 左右
2. 通讯相关
(1) cookie: 随请求自动携带
(2) storage: 不会自动携带
3. 操作相关
(1) cookie: 操作复杂, 没有 api, 前后端都可以操作
(2) storage: 操作简单, 有 api, 只能前端操作
4. 存储格式
(1) cookie: 字符串格式
(2) storage: 键值对
5. 时效相关
(1) cookie: 默认是会话级别, 可以手动设置
(2) storage: localStorage 就是永久, sessionStorage 就是会话, 不可更改
localStorage 和 sessionStorage 的区别
1. 跨页面通讯能力
(1) lcoalStorage 随便跨页面
(2) sessionStorage 只能是本页面跳转可以通讯
2. 时效性
(1) localStorage 就是永久
(2) sessionStorage 就是会话
localStorage 和 sessionStorage 的共同点
(1) 不能存储其他数据类型, 只能存储字符串类型数据
(2) 如果一定要存储其他数据类型, 转换成 json 格式存储
localStorage
-
设置
语法: window.lcoalStorage.setItem(key, value)
window.localStorage.setItem('a', 100)
window.localStorage.setItem('b', 200)
window.localStorage.setItem('c', 300)
-
删除
语法: window.localStorage.removeItem(key)
window.localStorage.removeItem('a')
-
获取
语法: window.lcoalStorage.getItem(key)
得到: 如果有这个 key, 那么就是对应的值, 如果没有这个 key, 那么就是 null
console.log(window.localStorage.getItem('a'))
console.log(window.localStorage.getItem('b'))
- 清除(清空)
语法: window.localStorage.clear()
window.localStorage.clear()
sessionStorage
跨页面通讯能力
只有当前页面跳转的才可已使用(在一个标签卡里面可以使用)
-
设置
语法: window.sessionStorage.setItem(key, value)
window.sessionStorage.setItem('a', JSON.stringify(obj))
window.sessionStorage.setItem('b', obj2)
window.sessionStorage.setItem('c', 100)
-
删除
语法: window.sessionStorage.removeItem()
window.sessionStorage.removeItem('a')
-
获取
语法: window.sessionStorage.getItem(key)
console.log(window.sessionStorage.getItem('a'))
console.log(window.sessionStorage.getItem('b'))
-
清除
语法: window.sessionStorage.clear()
window.sessionStorage.clear()
历史记录
在 window 下有一个叫做 history 的对象
内部存放的就是历史记录相关操作的方
- back
语法: window.history.back()
作用: 就是历史回退, 等价于浏览器的 ← 按钮
- forward()
语法: window.history.forward()
作用: 就是历史回退, 等价于浏览器的 → 按钮
- go()
语法: window.history.go(数字)
（1） 正整数: 表示历史前进
（2） 零: 表示从新打开当前页面
（3） 负整数: 表示历史回退
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
