1、认识BOM
* BOM
* 浏览器对象模型，其实就是操作浏览器的一些能力
*
* 我们可以操作那些内容？
* +获取浏览器的相关信息(窗口大小)
* + 操作浏览器进行页面的跳转
* + 获取浏览器地址栏的信息
* + 操作浏览器的滚动条
* + 获取浏览器的版本
* + 让浏览器出现一个弹出框
* + ...
*
* BOM 的核心就是 window 对象
* window 是JS内置的一个对象，里面包含着操作浏览器的方法
2、体验BOM
* ①.获取浏览器窗口的尺寸
* innerHeight / innerWidth
* + 作用：获取浏览器窗口的高度和宽度(包含滚动条)
* + 语法：window.innerHeight / window.innerWidth
console.log('浏览器窗口的高度', window.innerHeight)
console.log('浏览器窗口的宽度', window.innerWidth)
* ②.浏览器的弹出框 (学习的时候会用，实际工作中不会使用)
* alert
* prompt
* confirm
* * 有一个询问信息和两个按钮
* * 点击确定按钮 返回 true
* * 点击取消按钮 返回 false
var boo = confirm('请问您确定进入页面吗？')
console.log(boo)
* ③.浏览器的地址信息
* + 在 window 中，有一个 对象 叫做 location，他是专门用来存储浏览器地址栏内的信息
* 3.1 location 这个对象中，有一个属性叫做href
* 这个属性是专门存储浏览器地址栏内的 url 地址的信息
* 我们也可以给这个属性赋值，这样就会跳转到我们赋值的地址了
<body><button>点击跳转到百度</button></body>
setTimeout(function() {
window.location.href = 'https://www.baidu.com/'
}, 3000)
* 3.2 reload 这个对象中，有一个方法叫做reload
* 这个方法调用时会重新加载页面，相当于刷新
* 注意!!!不要直接写在代码中，否则浏览器会一直刷新
var count = 0
setInterval(function() {
count++
console.log(count)
if(count === 5) {
window.location.reload()
}
}, 1000)
* ④.浏览器的历史记录
* + window对象中有一个叫做history他专门用来存储历史记录信息
* 4.1 history.back
* 专门用来回退历史记录，就是回到前一个页面，相当于浏览器左上角的←按钮
* 注意:我们需要有上一条记录，否则不能使用这个方法
* 语法：window.history.back()
* 4.2 history.forward
* 是去到下一个历史记录里面，也就是去到下一个也买你，相当于浏览器左上角的→按钮
* 注意:我们需要之前有过回退操作，不然无法使用这个方法
* 语法：window.history.forward()
3、BOM的事件
* ①.浏览器的版本信息(了解)
* window 中的 navigator 可以获取到浏览器的信息
*
* ②.浏览器的onload事件
* 这个事件会在页面所有资源加载完毕后执行
* window.onload = function() {
* 我们的 Js 代码全部书写在这个函数内部
* }
*
* 在浏览器中，把JS 写在 head 中，在S加载时，下边的body标签还没来得及加载
* 可能会导致我们获取body内部的标签，比如说div或者img，出现问题获取不到
* 如果把代码放在onload 中，则不会出现这个问题
* 如果把Js写在body底部，写不写onload都无所谓
* ③.浏览器的onscroll 事件
* 当浏览器的滚动条滚动时会触发该事件,或者鼠标滚轮滚动时触发(前提是有滚动条)
*
* ④.浏览器的滚动距离
* + 浏览器的内容可以滚动，那么我们就能获取到浏览器的滚动距离
*
* 思考：
* 浏览器真的滚动了吗？
* 其实浏览器并没有滚动，而是浏览器内部的页面在滚动
* 换句话说:湖览器没动，页面向上或者向下走了
* 所以这个不能单纯的说是湖览器的内容了，而是页面的内容
* 那么我们这里就不能再使用window对象，而是使用document对象
*
* scrollTop
* 获取的是向上滚动的距离
* 语法1：document.body.scrollTop
* 语法2：document.documentElement.scrollTop
```js
window.onscroll = function() {
//console.log('浏览器滚动了~~~')
console.log('body:', document.body.scrollTop) //没有DOCTYPE声明的时候
console.log('documentElement:', document.documentElement.scrollTop) //有DOCTYPE声明的时候
}
```
* 两种语法的区别：
* IE浏览器(了解)
* 没有DOCTYPE声明的时候，两种语法没有差别用哪个都无所谓
* 有DOCTYPE 声明的时候，只能使用语法2 documentELement
*
* Chorme 和 FireFox
* 没有DOCTYPE声明的时候, 用语法1 body
* 有DOCTYPE声明的时候,用语法2 documentELement
* Safari
* 这两个语法都不用，使用一个单独的方法window.pageYoffset
*
* scrollLeft
* 获取的是向左滚动的距离
* 语法1：document.body.scrollLeft
* 语法2：document.documentELement.scrollLeft
* 区别参考 scrollTop
```js
window.onscroll = function() {
// console.log('浏览器滚动了~~~')
console.log('body:', document.body.scrollLeft) //没有DOCTYPE声明的时候
console.log('documentElement:', document.documentElement.scrollLeft) //有DOCTYPE声明的时候
}
```
