BOM详解

• BOM介绍,bom是三个单词的首拼--Browser Object Model，即浏览器对象模型。

所谓对象模型，指的是用对象来描述的一个结构。

BOM意思是通过对象组成的结构来操作浏览器的。

• 浏览器的历史记录

历史记录的操作是window的子对象history。可以操作网页的前进和后退。

history.back(); # 返回到上一个页面，相当于浏览器的后退按钮

history.forward(); # 前进到下一个页面（下一个页面必须是点击以后的页面），相当于浏览器的前进按钮

history.go(数字)//返回是负数,前进是正数

• 浏览器的地址栏信息--(重要)

console.log(location.hash); // 设置或返回从#开始的url --- 锚点

console.log(location.href); // 设置或返回完整的的url

console.log(location.search); // 设置或返回url中的参数部分

• 浏览器的弹出层

window.alert("恭喜你！");

window.prompt("请输入数字：",1);

window.confirm("你确定要删除吗？")

• 浏览器窗口尺寸

window.innerHeight - 浏览器窗口的高度

window.innerWidth - 浏览器窗口的宽度

• 浏览器的事件

onload事件：当网页中的所有资源都加在完成之后执行这个事件

使用说明：通常是将script标签放到head标签中的时候使用。因为放在head中默认是获取不到body中的内容的，但是有了这个事件后，就可以了。

onscroll 滚动事件：当网页滚动条的位置发生改变的时候触发这个事件

window.onscroll = function () {

console.log('浏览器滚动了')

}//浏览器需要有滚动条才行

浏览器窗口改变事件：resize

window.onresize = function(){

// 当浏览器的窗口大小发生改变的时候触发这个事件

}

• 定时器

延迟执行：

var timerId = setTimeout(function () {

console.log('我执行了')

}, 1000)

console.log(timerId) // 1

使用说明：第一个参数是要执行的函数，第二个参数延迟的时间（单位毫秒）。返回一个数字，表示当前页面中第几个定时器。

每间隔一段时间执行：

var timerId = setInterval(function () {

console.log('我执行了')

}, 1000)

关闭定时器：

定时器返回的数字，就是用来关闭定时器的

clearTimeout(timerId); // 关闭延迟执行的定时器

clearInterval(timerId); // 关闭间隔执行的定时器

• 异步操作

张三叫李四一起去吃饭，张三说他还有作业没做完，让李四先去，李四去吃饭，张三在写作业，这两个人做的事情不一样，但是在同一时间段内，两个人的事情在同时做，这就是异步。

张三叫李四一起去吃饭，张三说他还有作业没做完，让李四等一下，李四就等张三做完作业后两个人才一起去吃饭。这就是同步。

同步意思是同一时间只能做一件事情，多件事情需要排队按照顺序执行。异步就是同一时间可以做多件事情。

我们平常写的代码都是同步代码，定时器我们接触到的第一个异步代码。

js的特点是单线程的，也就是同一时间只能做一件事情，所以js会将异步代码交给浏览器去处理，因为浏览器是多线程的。

js的线程，会先将所有同步代码执行完，与此同时，浏览器也在处理异步代码(例如正在等待时间)，当浏览器中的异步代码到了应该执行的时候了，会将需要执行的异步代码放在一个队列中，进行排队等候；当js线程将所有同步代码执行结束后，会从队列中拿出第一个需要执行的代码去执行，执行过一个以后，再次到队列中拿出第二个需要执行的代码去执行。。。。

重要的事情说三遍:

js的异步操作，是在所有同步代码执行完成以后才执行异步代码

js的异步操作，是在所有同步代码执行完成以后才执行异步代码

js的异步操作，是在所有同步代码执行完成以后才执行异步代码

• 窗口控制

打开新的窗口

语法：

window.open(url, 窗口名称, 窗口风格)

参数说明：

如果url为空，会打开一个空的标签页；url不为空，就打开目标url页面

窗口名称是一个字符串

窗口风格：

height：窗口高度，数字，不能小于100

width：窗口高度，数字，不能小于100

left：窗口左边距离，数字

top：窗口上边距离，数字

关闭窗口

window.close()

设置窗口滚动

window.scrollTo(x, y)