一、什么是BOM？概念

BOM(Browser Object Model)全称，既是浏览器对象模型。

可以对浏览器进行操作：

获取一些浏览器的相关信息（窗口的大小）

操作浏览器进行页面跳转

获取当前浏览器地址栏的信息

操作浏览器的滚动条

浏览器的信息版本

让浏览器出现一个弹出框（alert/confirm/prompt）

BOM的核心就是Window对象

window是浏览器内置的一个对象，里面包含着操作浏览器的方法

二、window的核心对象使用

location:当前页面的地址

history:页面的历史记录

navigator:包含浏览器相关信息

screen:用户显示屏幕相关属性

document：文档对象

1.常用方法：prompt（用户输入对话框），alert(提示和确定警示)，confirm(提示确定和取消对话框)，

close(关闭浏览器窗口)，open(打开新的url窗口)，

setTimeout(在指定的毫秒数后调用函数或计算表达式)，setInterval(按照指定周期以毫秒计来调用函数或则表达式)

 

 2.定时器：什么是？图片轮播2s图片变换一次：用途在图片轮播、在线时钟、弹窗广告。

凡是自动执行的东西，很大可能是定时器相关

1）在javascript中，setTimeout()方法是设置“一次性”调用的函数。其中clearTimeout()可以用来取消这个函数

2)在javsscript中，可以使用setInterval()方法来设置“重复性”调用的函数，其中clearInterval()来取消执行。

3.获取浏览器窗口的尺寸（innerHeight和innerWidth）用window拼接

这两个方法分别是获取浏览器窗口的宽度和高度（包含滚动条的）

3.浏览器的onscroll事件：

//这个onscroll事件时当前浏览器的滚动条滚动的时候触发
或者鼠标滚轮滚动的时候触发
window.onscroll=function (){
     console.log('浏览器滚动了')
 }

//注意：前提是页面的高度要超过浏览器的可视窗口才可以

4.浏览器滚动的距离：

浏览器的内容可以滚动，那么就是可以获取到浏览器滚动的距离

思考：

浏览器真的滚动了吗?

其实我们的浏览器没有滚动的，是一直在那里

滚动的是什么？是我们的页面

所以说，其实浏览器没有动，只不过是页面向上走了

所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容

所以不是在用window对象了，而是使用document对象

5.浏览器（页面）滚动的距离

scrollTop 获取的是页面向上滚动的距离

两个获取方式：

document.body.scrollTop

document.documentElement.scrollTop

区别：

IE浏览器：没有DOCTYPE声明的时候，用这两个都行

有DOCTYPE声明的时候，只能用document。documentElement.scrollTop

Chrome和FireFox:

没有DOCTYPE声明的时候，用document.body.scrollTop

有DOCTYPE声明的时候，用document.documentElement.scrollTop

Safari

两个都不用，使用一个单独的方法window.pageYOffset

scrollLeft 获取页面向左滚动的距离

使用场景：滚动加载判断，回滚顶部，自动滚动列表