BOM相关知识

一、 什么是BOM？

BOM,Browser Objest Model，即浏览器对象模块。

其实就是操作浏览器的一些能力

我们可以操作哪些内容：

-获取一些浏览器的相关信息(窗口的大小)

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

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

-操作浏览器的滚动条

-浏览器的信息(浏览器的版本)

-让浏览器出现一个弹出框(alert/confirm/prompt)

-BOM的核心就是Window对象

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

window对象包含了核心对象

location，即当前页面的地址

history，即页面的历史记录

navigator，包含浏览器相关信息

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

document，即文档对象

 二、窗口对象（window）

常用方法：

proompt()显示可提示用户输入的对话框

alert()显示带有一个提示信息和一个确认按钮的警示框

confirm()显示一个带有提示信息、确定和取消按钮的对话框

close()关闭浏览器窗口

open()打开一个新的浏览器窗口，加载给定URL所指定的文档

setTimeout()在指定的毫秒数后调用函数或计算函数表达式

setInterval()按照指定的周期(以毫秒计)来调用函数和表达式

定时器

什么是定时器？我们可以看到很多网站首页有一个“图片轮播”特效，每隔2s图片变换一次，这里就用到了定时器。定时器用途非常广泛，在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西，很大可能跟计时器有关。

setTimeout()和clearTimeout();

setInterval()和clearInterval();

 在JavaSpcript中，我们可以使用setTimeout()方法来设置“一次性”调用函数。其中clearTimeout()可以用来取消执行setTimeout()方法。

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

对话框

alert()消息提示框

confirm()消息确认框

prompt()

获取浏览器窗口的尺寸

innerHeight和innerWidth

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

 浏览器的onscroll事件

这个onscroll事件是当浏览器的滚动条滚动的时候触发

或者鼠标滚轮滚动的时候出发

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

浏览器滚动的距离

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

思考一个问题？

浏览器真的滚动了吗？

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

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

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

所以不是在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

 Safari

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

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

两个方法document.body.scrollLeft

document.documentElementLeft

两个之间的区别和之前的scrollTop一样 

历史记录对象(history)

获取history对象window.history

 位置对象(location)

常用属性:location.href   获取当前页面的URL地址:location.href(window.location.href)

常用方法 重新加载当前文档:location.reload();

屏幕对象(screen了解)

提供了用户显示屏幕的相关属性，比如显示屏幕的宽度、高度，可用宽度、高度。

 

浏览器的版本信息(navigator了解)

windowz中有一个对象叫做navgiator

是专门用来获取浏览器信息的

navigato.userAgent是获取的浏览器的整体信息

 navigator.appVersion获取的是浏览器的版本号

console.log(window.navigator.appVersion)

navigator,platform获取到的是当前计算机的操作系统

console.log(window.navigator.platfrom)