1. 浏览器对象模型 (Browser Object Model)
1. BOM中的顶级对象 是window
console.log(window)
2. 浏览器操作中的各个操作对象 都是window对象的属性成员
3. 全局中的this和top关键字 指向window对象
console.log( this===top )
console.log( this===window )
4. BOM操作中 可以省略 window
比如: window.location.href = 'https://www.baidu.com/' 可以简写为 location.href = 'https://www.baidu.com/'
5. 在全局中通过var定义的变量或函数: 其实就是添加在window对象中的属性和方法
<script>
var num = 100;
console.log( window )
</script>
2. 浏览器信息-navigator对象
通过navigator对象获取浏览器信息
获取浏览器整体信息
console.log( window.navigator.userAgent )
获取浏览器名称
console.log( window.navigator.appName );
获取浏览器的版本信息
console.log( window.navigator.appVersion )
获取操作平台
console.log( window.navigator.platform )
2. 浏览器的窗口尺寸
1. window.innerWidth 浏览器可视窗口的宽度(包含滚动条)
2. window.innerHeight 浏览器可视窗口的高度(包含滚动条)
在窗口大小变化事件中获取窗口大小
window.onresize = function () {
console.log(window.innerHeight)
console.log(window.innerWidth)
}
4. 浏览器的地址栏信息-location对象
在 window对象中, 有一个 对象 叫做 location, 它是专门用来存储浏览器地址栏内的信息
location对象的href属性：
专门存储浏览器地址栏内的 url 地址的信息
window.location.href = 'https://www.baidu.com/'
location对象的reload()方法
这个方法调用时会重新加载页面, 相当于 刷新
<script>
location.reload()
btn2.onclick = function () {
location.reload();
}
</script>
5. 浏览器弹窗
alert() 提示弹窗
没有返回值
confirm() 确认弹窗
有返回值: 点击确定返回true,点击取消返回false
prompt() 提问弹窗
返回值: 输入什么内容点击确定就返回什么(字符串类型)
点击取消返回null
注意: 浏览器弹窗都是阻断程序的执行,只有操作之后才会正常执行代码
6. 浏览器的历史记录信息-history对象
BOM中通过history对象操作浏览器的历史记录信息
1. history.back()回退
回退到历史记录中的上一个页面,前提要有历史记录
2. history.forward()前进
前进到历史记录中的下一个页面,前提要有历史记录
3. history.go(n)
n为正数则前进到历史记录中的前几个页面
n为负数则回退到历史记录中的后几个页面
history.go(-1) 相当于 history.back()
history.go(1) 相当于 history.forward()
history.go() 会刷新页面
7. 浏览器的事件
window.onload事件
onload事件会在页面所有资源加载完毕后执行
window.onload = function () {
}
注意:
在浏览器中, 如果把 JS 写在 head 中, 在 JS 加载时, 下边的 body标签里的内容还没来得及加载
可能会导致我们获取不到body内部的标签, 比如说 div 或者 img, 出现问题
如果把代码放在 onload 中, 则不会出现这个问题
如果把 JS 写在 body标签 底部, 写不写 onload 都无所谓
window.onscroll事件
当浏览器的滚动条滚动时会触发该事件, 或者鼠标滚轮滚动时触发(前提是有滚动条)
浏览器向上/左滚动的距离-scrollTop/scrollLeft
浏览器没动, 浏览器内部的页面向上或者向下走了, 那么我们就能获取到浏览器的滚动距离
Chorme 和 FireFox浏览器下：
1）页面有DOCTYPE文档声明的时候
通过 window.document.documentElement.scrollLeft 获取
通过 window.document.documentElement.scrollTop 获取
2）页面没有DOCTYPE文档声明的时候
通过 window.document.body.scrollLeft 获取
通过 window.document.body.scrollTop 获取
Safari浏览器下：(了解)
这两个语法都不用, 使用一个单独的方法 window.pageYOffset
案例1:顶部通栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leon</title>
<style>
*{margin: 0;padding: 0;}
#top1{
width: 100%;
height: 0;
background-color: skyblue;
position: fixed;
color: red;
font-size: 30px;
font-weight: bold;
display: flex;
justify-content: space-evenly;
align-items: center;
overflow: hidden;
transition: all 1s;
}
body{
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<div id='top1'>顶部通栏</div>
</body>
</html>
<script>
window.onscroll = function(){
var goLength = document.documentElement.scrollTop;
if(goLength>=800){
top1.style.height = '80px';
}else{
top1.style.height = '0px';
}
}
</script>
案例2：回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leon</title>
<style>
*{margin: 0;padding: 0;}
#top1{
width: 100%;
height: 0;
background-color: skyblue;
position: fixed;
color: red;
font-size: 30px;
font-weight: bold;
display: flex;
justify-content: space-evenly;
align-items: center;
overflow: hidden;
transition: all 1s;
}
body{
width: 3000px;
height: 3000px;
}
span{
display: block;
width: 15px;
background-color: orange;
position: fixed;
right: 50px;
bottom: 100px;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<div id='top1'>顶部通栏</div>
<span id="top2">回到顶部</span>
</body>
</html>
<script>
window.onscroll = function(){
var goLength = document.documentElement.scrollTop;
if(goLength>=800){
top1.style.height = '80px';
top2.style.display = 'block';
}else{
top1.style.height = '0px';
top2.style.display = 'none';
}
if(goLength<=0){
clearInterval(timer);
}
}
var timer;
top2.onclick = function () {
clearInterval(timer);
var topLength = document.documentElement.scrollTop;
timer = setInterval(function(){
topLength -=10;
console.log( topLength )
document.documentElement.scrollTop = topLength;
},10)
}
</script>
8. 浏览器的本地存储(面试必问)
localStorage及其方法
localStorage
1. 浏览器的本地存储, 持久存储, 一旦存储永久存在
2. 只能存基本数据类型(一般存储字符串), 不能存储其他数据类型
3. 可以跨页面通讯:两个页面得到了数据共享, 在别的页面也能读取到。
我们将这种情况叫做 跨页面通讯
window.localStorage.setItem(key, value)
window.localStorage.setItem('qq1', 'QF001')
window.localStorage.setItem('qq2', '66666666')
window.localStorage.getItem(key)
var qq = window.localStorage.getItem('qq')
var pw = window.localStorage.getItem('password')
console.log(qq)
window.localStorage.removeItem('qq1')
window.localStorage.clear()
sessionStorage及其方法
sessionStorage
1.浏览器的本地存储, 临时存储。注释掉已运行的
window.sessionStorage.setItem(key, value)代码，然后关闭浏览器以后, 存储内容
自动消失
2.只能存基本数据类型(一般存储字符串), 不能存储其他数据类型
3.本页面可以读取到数据，但是在别的页面不能读取到存储的数据。想要跨页面通讯, 必须从
本页面跳转的到目标页面，才可以在目标页面里读取到存储的数据
1. 增
window.sessionStorage.setItem(key, value)
window.sessionStorage.setItem('wx1', 'QF001')
window.sessionStorage.setItem('wx2', 'QF002')
window.sessionStorage.setItem('wx3', 'QF003')
2. 查
var wx = window.sessionStorage.getItem('wx')
console.log(wx)
var phoneNum = window.sessionStorage.getItem('pNum')
console.log(phoneNum)
3. 删除一条
window.sessionStorage.removeItem('wx3')
4. 清空
window.sessionStorage.clear()
cookie
1. 只能存储字符串, 并且有固定的格式
key=value
2. 存储大小有限制 (大约是 4kb)
3. 存储有时效性
+ 默认是会话级别失效（也就是说关了浏览器就没了）, 但是可以手动设置过期时间
4. 操作必须依赖服务器（最重要）
+ 本地打开的页面不能操作 cookie
+ 要求页面必须在服务器打开
5. 跟随前后端请求自动携带
+ 只要 cookie 空间中有内容时
+ 就会在该页面和后端交互的过程中自动携带
6. 前后端操作
+ 前端可以使用 JS 来操作 cookie
+ 任何一个后端语言都可以操作 cookie
7. 存储依赖域名
+ 在哪个域名里存储, 就在哪个域名里使用
+ 不能跨域名通讯
