js BOM详解

什么是BOM

BOM是浏览器对象模型，它提供了独立于内容与浏览器窗口进行交互的对象，其核心对象是window

DOM和BOM区别

DOM：

1. 文档对象模型
2. DOM就是把[文档]当做一个[对象]来看待
3. DOM的顶级等下是document
4. DOM主要学习的是操作页面元素
5. DOM是W3C标准规划

---

BOM：

1. 浏览器对象模型
2. 吧[浏览器]当做一个[对象]来看待
3. BOM的顶级对象是window
4. BOM学习的是浏览器窗口交互的一些对象
5. BOM是浏览器厂商在各自浏览器上定义的兼容性较差

窗口加载事件

window.onload = function(){}
或者
window.addEventListener('load', function(){})

Window.onload是窗口（页面）加载事件，当温度内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用该处理函数

注意：

1. 有了window.onload 就可以吧js代码写到页面的任何一个地方，因为onload是等页面内容加载完成了再去执行处理函数
2. window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
3. 如果使用addEventListener则没有限制

窗口加载事件2

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片、flash等等，IE9以上才支持

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

调整窗口大小事件

window.onresize = function(){}
或者
window.addEventListener('resize',function(){})

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数

注意：

1. 只要窗口大小发生像素变化，就会触发这个时间
2. 我们经常利用这个事件完成响应式布局，window.innerWidth 可以获取当前屏幕的宽度。

定时器

window对象给我们提供了两种定时器

一次性定时器

setTimeout(调用函数,[延迟的毫秒数]);
setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数，只执行一次。
注意：
1、这个调用函数可以直接写函数，或者写函数名，或者采取字符串'函数名()'三种形式，但是第三种不推荐
2、延迟的毫秒数省略的话默认是0，如果写，必须是毫秒
4、因为定时器可能有很多，我们经常给定时器赋值一个标识符

停止一次性定时器

clearTimeout(timeoutID) 方法取消一次性定时器  timeoutid为之前给一次性定时器的标识符

重复定时器

setInterval(回调函数,[间隔的毫秒数]):每隔一段时间，反复重复调用回调函数
清楚重复定时器
clearInterval(intervalID)

location对象属性

location对象属性	返回值
location.href	获取或者设置整个url
location.host	返回主机（域名） www.baidu.com
Location.port	返回端口号，如果没有写返回空字符串
location.pathname	返回路径
location.search	返回？后面的所有参数
Location.hash	返回片段 #后面内容常见于连接锚点

location对象方法	返回值
location.assign()	跟href属性一样，可以跳转页面（可以记录历史所以有后退功能
location.replace()	替换当前页面，不记录历史，所以不能后退页面
location.reload()	重新加载页面相当于刷新或者f5如果参数为true相当于强制刷新

navigator对象

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

下面前端代码可以判断用户是用那个终端打开页面实现跳转

<script type="text/javascript">
	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 = ''; //电脑
	}
</script>

history对象

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

history对象方法	作用
History.back()	可以后退功能
History.forward()	前进功能
History.go(参数)	前进后退功能呢，参数如果是1前进，如果是-1后退