BOM 初步

一、BOM概述

BOM： BOM即浏览器对象模型，它是独立于内容而与浏览器窗口交互的对象，其核心对象的window。
构成： window→document、location、navigation、screen、history

DOM	BOM
文档对象模型	浏览器对象模型
把文档当做一个对象来看待	把浏览器当做一个对象来看待
顶级对象是document	顶级对象是window
主要学习操作页面元素	主要学习浏览器窗口交互的一些对象
W3C标准规范	浏览器厂商在各自浏览器上定义的，兼容性较差

二、window对象常见事件

1. 窗口加载事件

（1）当文档内容完全加载完成触发该事件（包括图像、脚本文件、css文件等）

window.onload = function(){ }
或
window.addEventListener(‘load’, function(){ })

（2）仅当DOM加载完成时触发该事件，不包括样式表、图片、flash等。

document.addEventListener(‘DOMContentLoaded’, function(){ })

2. 调整窗口大小事件

只要浏览器窗口大小发生了变化，就会触发该事件。可利用该事件进行响应式布局，window.innerWidth表示当前屏幕的宽度。

window.onresize = function(){ }
或
window.addEventListener(‘resize’, function(){ })

3. 定时器

（1）setTimeout()定时器：设置一个定时器，到时间后执行调用函数。即延时调用。

setTimeout(调用函数, [延迟的毫秒数])

关闭Timeout()定时器：

clearTimeout(timeoutID)

（2）setInterval()定时器：每隔一段时间，就去调用一次回调函数。

setInterval(回调函数， [延迟的毫秒数])

清除Interval()定时器：

clearInterval(ID)

二、location对象

概念： window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为该属性返回的是一个对象，所有也叫location对象。

1. location对象的属性

（1）location.href：获取或设置整个URL
（2）location.host：返回主机（域名）
（3）location.port：返回端口号，如果未写端口号则返回空字符串
（4）location.pathname：返回路径
（5）location.search：返回参数
（6）location.hash：返回片段。#后面的内容，常见于链接、锚点

2. location对象的方法

（1）location.assign()：和href一样，可以跳转页面（也称为重定向页面）
（2）location.replace()：替换当前页面，因为不记录历史，所以不能后退页面
（3）location.reload()：重新加载页面，相当于刷新按钮或者f5，如果参数为true则强制刷新 Ctrl+F5

三、navigator对象

navagator对象包含有关浏览器的相关信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。
以下代码可以判断用户哪个终端打开页面，实现跳转：

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
	window.location.href = "";	//手机
}else{
	window.location.href = "";	//电脑
}

4、history对象

window对象提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

history对象方法

（1）history.back()：后退功能
（2）history.forword()：前进功能
（3）history.go(参数)：前进后退功能，参数如果是1，前进一个页面；如果是-1，后退一个页面