JavaScript全解析——常见的BOM操作(下)
本篇为JavaScript全解析，常见的BOM操作下篇，上篇可以点此查看
浏览器的常用事件
浏览器的 onload 事件
这个不再是对象了，而是一个事件
该事件是在页面所有资源(html 结构, 视音频, 图片 等)加载完毕后函数触发
window.onload = function () {
console.log('页面已经加载完毕')
}
在 html 页面中把 js 写在 head 里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 这个代码执行的时候，body 还没有加载
// 这个时候我们就获取不到 body 中的那个 div
// 就需要使用 window.onload 事件
window.onload = function() {
// 这个函数会在页面加载完毕以后在执行
// 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
}
</script>
</head>
<body>
<div></div>
</body>
</html>
在html页面中把js写在body最后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script>
// 这个代码执行的时候，body 已经加载完毕了
// 在这里就可以获取到 div，写不写 window.onload 就无所谓了
window.onload = function() {
// 这个函数会在页面加载完毕以后在执行
// 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
}
</script>
</body>
</html>
浏览器的 onscroll 事件
这个 onscroll 事件是当浏览器的滚动条滚动的时候触发，也就是滚动条的位置发生改变的时候触发
这个滚动条的位置改变不管是横向滚动条还是纵向滚动条
或者鼠标滚轮滚动的时候出发
window.onscroll = function () {
console.log('浏览器滚动了')
}
注意：前提是页面的高度要超过浏览器的可是窗口才可以。就是要出现滚动条
浏览器滚动的距离(卷去的高度和宽度)
浏览器内的内容既然可以滚动，那么我们就可以获取到浏览器滚动的距离
那么我们来思考一个问题
浏览器真的滚动了吗？
其实我们的浏览器是没有滚动的，是一直在那里，滚动的是什么？是我们的页面
所以说，其实浏览器没有动，只不过是页面向上走了
所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容
所以不是在用 window 对象了，而是使用 document 对象
scrollTop
获取的是页面向上滚动的距离
一共有两个获取方式
- document.body.scrollTop
- document.documentElement.scrollTop
window.onscroll = function () {
console.log(document.body.scrollTop)
console.log(document.documentElement.scrollTop)
}
两个都是获取页面向上滚动的距离
区别有：
IE 浏览器
没有 DOCTYPE 声明的时候，用这两个都行
有 DOCTYPE 声明的时候，只能用 document.documentElement.scrollTop
Chrome 和 FireFox
没有 DOCTYPE 声明的时候，用 document.body.scrollTop
有 DOCTYPE 声明的时候，用 document.documentElement.scrollTop
scrollLeft
获取页面向左滚动的距离
也是两个方法
○document.body.scrollLeft
○document.documentElementLeft
window.onscroll = function () {
console.log(document.body.scrollLeft)
console.log(document.documentElement.scrollLeft)
}
两者之间的区别和之前的 scrollTop 一样
浏览器的onresize事件
onresize 事件在浏览器窗口被调整大小时发生
不管横向还是纵向, 只要尺寸改变了就会触发此事件
语法：window.onresize = function () {}
window.onresize = function() {
// 获取浏览器窗口尺寸
var width = window.innerWidth
if (width >= 600) {
window.alert('你好啊')
}
}
设置滚动条的偏移位置(滚动到) —scrollTo
对浏览器的滚动条进行定位,其实也就是设置浏览器卷去的高度和宽度
根据传递不同的参数决定不同的表现形式
传递数字
语法：window.scrollTo(x, y)
x: 表示设置卷去的宽度
y: 表示设置卷去的高度
■注意：必须同时传递两个参数，同时也只能进行瞬间定位, 不能平滑滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<button id='go'>走你</button>
<script>
go.onclick = function() {
window.scrollTo(1000, 800)
}
</script>
</body>
</html>
传递一个对象数据类型
语法：window.scrollTo({top: yyy,left: xxx,behavior: 'smooth'})
注意：
■如果你传递对象数据类型, 那么在对象内, 可以只写一个值
■默认是瞬间定位, 可以通过对象内的第三个成员来让他实现平滑滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<button id='go'>走你</button>
<script>
go.onclick = function() {
window.scrollTo({
top: 100,
left: 500,
behavior: "smooth"
})
}
</script>
</body>
</html>
浏览器的历史记录
window 中有一个对象叫做 history，是专门用来存储历史记录信息的
也就说history 对象保存了当前窗口访问过的所有页面网址
history.back()
●作用：history.back方法是用来回退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮
●语法：window.history.back()
window.history.back()
前提是你要有上一条记录，不然就是一直在这个页面，也不会回退
history.forward()
history.forward 是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮
语法：window.history.forward()
window.history.forward()
前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个
history.go()
作用：进行历史跳转, 根据参数的不同进行不同的跳转
语法：window.history.go(数字)
数字可以是正整数、可以是0也可以是负整数
■正整数表示历史前进
■0重新打开当前页，相当于刷新一样
■负整数表示历史后退
window.history.go(2)
window.history.go(0)
window.history.go(-2)
浏览器的标签页
就是操作浏览器标签页的方法
window.open方法
●作用：开启一个新的标签页或者打开指定地址
●语法：window.open(‘地址’)
window.open('https://www.baidu.com')
window.close 方法
●作用：关闭当前标签页或者说关闭浏览器窗口
●语法：window.close()
window.close()