2-BOM

'BOM

• 能说出什么是DOM

• 能够知道浏览器的顶级对象window（窗口)

• 能够写出页面加载事件以及注意事项

• 能够写出两种定时器函数，并说明其区别

• 能够了解JS执行机制

• 能够使用location对象完成页面之间的跳转 /（地址栏）

• 能够使用navigation对象涉及的属性 /（浏览器）

• 能够使用history提供的方法实现页面刷新 / （历史纪录）

一、概念

1、什么是BOM

• BOM(browser object model)即浏览器对象模型，它提供了独立于内容和浏览器窗口进行交互的对象，其核心对象是window

（后退、前进页面、刷新页面、浏览器窗口大小发生变化、滚动条滚动）

• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性

• BOM缺乏标准，JavaScript语法的标准是ECMA，DOM的标准是W3C，BOM最初是Netscape（美国网景公司）浏览器标准的一部分（兼容性较差）

2、BOM的组成

• window对象是浏览器的顶级对象，它具有双重角色

  • 他是JS访问浏览器的接口

  • 他是一个全局对象，定义在全局作用域中的变量，函数都会变成window的属性和方法，在调用的时候可以省略，前面学的alert(),prompt()都是window对象的方法

• 注意；window下的一个特殊属性window.name，所以声明的时候不要取变量名为name,

二、window对象的常见事件

前言：

• 代码的顺序由上往下执行，所以之前一直让script写在HTML代码下面，代码点击才会触发执行

1、窗口加载事件

(1)、窗口加载事件(1)

window.οnlοad=function(){};

window.addEventListener('load',function(){});

• window.onload：是窗口（页面）加载事件，当文档内容完全加载完毕就会触发该事件（包括图像，脚本语言，css文件等），就调用里面的函数

注意：

• 有了window.onload就可以把代码写在页面的任意地方，因为onload是等页面的全部内容都加载完毕后后再取执行吃力函数

• window.onload传统注册方式只能写一次，如果有多个，会以最后一个window.onload为准

• 如果使用window.addEventListener('load',function(){})，则没有限制

( 2)、窗口加载事件(2)

window.onDomContentLoaded=functin（）{}

window.addEventListener（'DomContentLoaded',function(){}）

• DomContentLoaded事件触发时，仅当DOM加载完毕，不包括样式表(css)、图片、flash等等（ie9以上才支持）

• 如果页面的图片很多的话，从用户访问到onload触发可能需要很长的时间，交互效果就不能实现，必然影响用户的体验，此时用DomContentLoaded事件比较合适

$(document).ready(function(){………………})
$(function(){………………})

2、窗口大小调整事件

• 这是调整窗口大小加载事件，根据浏览器窗口大小发生变化时，就会触发的一个事件）

window.οnresize=function(){……};

window.addEventListener('resize',function(){……})

注意

• 只要窗口大小发生像素变化，就会触发这个事件

• 我们经常利用这个事件完成响应式布局

window.innerwidth //当前屏幕的宽度，包含宽、内边距、边框
window.innerheight

3、定时器事件

window对象提供了两种非常好用定时器方法：setTimeout和setInterval

(1)、设置setTimeout（）定时器

定时器异步执行，等外部代码全部执行完毕再执行自己

语法：

window.setTimeout（调用函数，[延迟的毫秒数]）

• setTimeout（）方法用于设置一个定时器，该定时器在定时器到期后执行调用函数

• 这个window在调用的时候可以省略

• 这个延迟时间单位是毫秒数，还可以写函数，还有一个写法”函数名（）“

function callback(){
    console.log('你好')
}
setTimeout(callback,3000)
//或者
setTimeout('callback（）',3000)//采用字符串方式，不提倡

• 页面中可能有很多定时器，我们经常给定时器加标识符（名字），来区分不同的定时器

• setTimeout()里面的调用函数，我们称之为回调函数

• 普通函数按照代码顺序直接调用

• 而定时器里面回调函数，需要等待时间，时间到了才会去调用这个函数

(2)、停止setTimeout（）定时器

语法

window.clearTimeout（timeout id）//参数为定时器的名字（标识符）

(3)、setInterval（）定时器

语法

window.setinterval(function(){},[时间])

• window可以省略

• 这个调用函数可以直接写函数，或者写函数名或者采用字符串的方式来调用（三种方式都可以）

• 间隔时间是毫秒数单位，如果不写默认是0.如果写必须是毫秒，表示每隔多少毫秒就自动调用这个函数

• 因为定时器有很多种，所以我们经常会给定时器一个标识符（名字）

(2)、停止setInterval（）定时器

window.clearInterval(定时器标识符/名字)

两种定时器的区别

• set'Timeout()，延迟时间到了，就去调用这个回调函数，只调用一次。就结束了这个定时器

• setInterval()，每隔这个延迟时间，就去调用这个回掉函数，会调用很多次，重复调用这个函数

DOM对象

1、location对象的方法

地址栏

相关方法：

• location.href（） //跳转页面

• location.assign（）//跟href一样，可以跳转页面（也称重定向页面）

• location.replace（）//替换当前页面，因为不记录历史，所以没有返回键

• location.reload（） //重新加载页面，相当于刷新按钮或F5，如果参数为true为强制刷新（ctrl+F5）

<button>点击</button>
​
var btn=document.queryselector('button');
btn.addEventListener（'click',function(){
​
    //记录历史记录，所以可以实现后退功能
    location.assign('http://www.itcast.com')
​
    //2、不记录历史纪录，没有后退功能
    location.replace('http://www.itcast.com')
​
​
    //3、刷新页面
    location.replace(true/false)
​
}）

2、navigator对象

• navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器user-agent的头部的值

• 下面代码可以判断用户在哪个终端设备打开页面，实现跳转

• 前端人员可通过这个属性来进行简单判断，你打开的是移动端页面还是移动端页面

4、history对象

• back（） //可以后退功能

• forward（） //可以前进功能

• go（参数） //前进后退功能，参数为1，前进一个页面，参数是-1，后退一个页面