BOM

BOM：浏览器对象模型，其实就是操作浏览器的一些能力

BOM 的核心就是 window 对象

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

我们可以操作哪些内容？

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

innerHeight / innerWidth

作用：获取浏览器窗口的高度和宽度（包含滚动条）

语法：window.innerHeight /window.innerWidth

console.log(window.innerHeight)

console.log(window.innerWidth)

操作浏览器进行页面的跳转

获取浏览器地址栏的信息

在window中，有一个对象叫做location，它是专门用来存储浏览器地址栏内的信息

location这个对象中，有一个属性叫做 href

这个属性是专门存储浏览器地址栏内的 url地址的信息

我们也可以给这个属性赋值，这样就会跳转到我们赋值的地址了

reload 这个对象中，有一个方法叫做reload

这个方法调用时会重新加载页面，相当于刷新

注意：不要直接写在代码中，否则浏览器会一直刷新

操作浏览器的滚动条

获取浏览器的版本（了解）

window 中的 navigator 可以获取到浏览器的信息

让浏览器出现一个弹出框

alert

prompt

confirm

有一个询问信息和两个按钮

点击确定按钮，返回true

点击取消按钮，返回false

……

浏览器的历史记录

window对象中，有一个叫做 history 它专门用来存储历史纪录信息

history.back

专门用来回退历史记录，就是回到前一个页面，相当于浏览器左上角的 ← 按钮

注意：我们需要有上一条纪录，否则不能使用这个方法

语法：window.history.back()

history.forward

是去到下一个历史纪录里面，也就是去到下一个页面，相当于浏览器左上角的 → 按钮

注意：我们需要之前有过回退操作，不然无法使用这个方法

语法：window.history.forward()

浏览器的 onload 事件

这个事件会在页面所有资源加载完毕后执行

语法：

window.onload = function(){
     
   我们的JS代码全部书写在这个函数内部
   
 }

在浏览器中，把JS写在 head 中，在JS加载时，下边的body标签还没来得及加载

可能会导致我们获取 body内部的标签，比如 div 或者 img ，出现问题获取不到

如果把代码放在 onload 中，则不会出现这个问题

如果把 JS写在 body 底部，写不写 onload 都无所谓

浏览器的 onscroll 事件

当浏览器的滚动条滚动时会触发该事件，或者鼠标滚轮滚动时触发(前提是有滚动条)

浏览器的滚动距离

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

思考：浏览器真的滚动了吗？

其实浏览器并没有滚动，而是浏览器内部的页面在滚动

换句话说：浏览器没动，页面向上或者向下走了

所以这个不能单纯的说是浏览器的内容了，而是页面的内容

那么我们这里就不能再使用 window对象，而是使用 document 对象

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

语法1：document.body.scrollTop

语法2：document.documentElement.scrollTop

两种语法的区别：

IE浏览器（了解）
没有DOCTYPE 声明的时候，两种语法没有差别，用哪个都无所谓
有DOCTYPE 声明的时候，只能使用语法2（documentElement）
Chrome 和 FireFox
- 没有DOCTYPE 声明的时候，用语法1 body
- 有DOCTYPE 声明的时候，用语法2 documentElement
Safari浏览器
- 这两个语法都不用，使用一个单独的方法 window.pageYOffset

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

语法1：document.body.scrollLeft
语法2：document.documentElement.scrollLeft
区别：参考scrollTop*

JS 之 BOM

BOM