一、认识BOM
BOM是浏览器对象模型，其实就是操作浏览器的一些能力。可以操作的内容有：
- 获取浏览器的相关信息
- 操作浏览器进行页面的跳转
- 获取浏览器地址栏的信息
- 操作浏览器的滚动条
- 获取浏览器的版本
- 让浏览器出现一个弹出框
- ....
二、关于BOM的一些操作
在开始讲解BOM操作之前，我们首先要明确：BOM的核心就是 window 。（window是JS内置的一个对象，里面包含着操作浏览器的方法）
- 获取浏览器窗口的尺寸
- 语法：window.innerHeight / window.innerWidth
- 作用：获取浏览器的高度和宽度（包括滚动条）
console.log(window.innerHeight) //获取浏览器高度
console.log(window.innerWidth) //获取浏览器宽度
- 浏览器的弹出层（简单了解即可，实际开发中很少使用）
- alert
- prompt
- confirm：由一条询问信息和两个按钮组成，按钮分别为“确认”按钮和“取消”按钮；
-
- 点击确认按钮，返回"true"
-
- 点击取消按钮，返回"false"
-
- 获取浏览器的地址信息
- 在window对象中，有一个对象叫做location，它是专门用来存储浏览器地址栏的信息。
- 在location对象中，有一个href属性，专门用来存储浏览器地址栏内的url地址的信息。
- 我们也可以给href重新赋值，这样就可以让页面跳转到我们赋值的地址了。
//示例：设置倒计时器，让页面在3秒后跳转到“百度”的页面
setTimeout(function(){
window.location.href = 'https://www.baidu.com/'
},3000)
- 在location对象中，有一个方法叫做reload，当调用这个方法时，会重新加载页面，也就是我们说的“刷新”。但是需要注意的是，如果我们调用了这个方法，那么书写代码的时候，要将reload方法放在事件中，否则页面会一直刷新。
//示例：让页面每5次循环刷新一次
var count = 0
setInterval(function(){
count++
if(count === 5){
window.location.reload()
}
- 获取浏览器的历史记录
- window对象中用history专门来存储历史记录。
- 语法1：window.history.back()
- 作用：用来回退历史信息，也就是回到上一个页面
- 注意：需要有上一条记录，才能执行回退
- 语法2：window.history.forward()
- 作用：去到下一条历史记录里，也就是下一个页面
- 注意：需要之前有过回退操作，才能执行此操作
- 获取浏览器的版本信息（了解即可）
- 语法：window.navigator
- 浏览器的onload事件
- 语法：window.onload=function(){全部的JS代码}）
- 执行顺序：这个语法会在全部的页面资源加载完毕之后再执行
- 使用onload的语境：如果把JS代码写在head标签中，那么根据浏览器会从上到下加载资源，此时会导致body内部标签的加载出现问题；要想解决这个问题，就要把JS代码写在onload中，原因是onload是在页面全部资源加载完毕之后执行，不会影响body内部代码的执行；如果是把JS代码写在body底部的话，用不用onload方法也就无所谓了。
- 浏览器的onscroll事件
- 使用语境：当浏览器的滚动条滚动(或鼠标滚轮滚动)时，会触发该事件。(前提是有滚动条)
- 浏览器的滚动距离
- 当浏览器触发了onscroll事件了之后，就会有滚动距离。需要注意的是，此时不是浏览器发生了滚动，而是浏览器的页面发生了滚动。所以此时不能再使用window对象，而是document对象。
- scrollTop 获取页面向上滚动距离
-
- 语法1：document.documentElement.scrollTop()
-
- 语法2：document.body.scrollTop()
-
- 需要注意的是：这两种语法存在兼容性问题。在IE浏览器中，如果没有DOCTYPE声明，两种语法都可以，如果有DOCTYPE声明，那么只能使用语法1；在Chrome 和 FireFox中，如果没有DOCTYPE声明，只能使用语法2，有DOCTYPE声明的时候，只能用语法1；而在Safari中，则选择一种新的方式获取页面向上滚动距离：window.pageYOffset
-
- scrollLeft 获取页面向左滚动距离
- 语法使用规则同上
