BOM

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

其他对象：

navigator ：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器；

• 一般只会使用 userAgent 来判断浏览器的信息， userAgent 是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的 userAgent ；

  alert(navigator.appName);  
  var ua = navigator.userAgent;  
  console.log(ua);  
  

location ：代表当前浏览器的地址栏信息，通过 location 可以获取地址栏信息，或者操作浏览器跳转页面；

• 直接打印 location ，则可以获取到地址栏的信息（当前页面的完整路径）；

• 如果直接将 location 属性修改为一个完整的路径或相对路径，则页面会自动跳转到该路径，并且会生成相应的历史记录：

  location.assgin(); // 跳转到其他的页面
  location.reload(); // 重新加载当前页面，作用和刷新按钮一样。参数为true时，则会强制清空缓存刷新页面
  location.replace(); // 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面。不会生成历史记录，不能使用回退按钮回退

History ：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录；由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页。而且该操作只在当次访问时有效；
Screen ：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息；

与 DOM 对比：

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

构成

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

• 是 JavaScript 访问浏览器窗口的一个接口；
• 是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法；

在调用的时候可以省略 window，对话框属于 window 对象方法，如 alert(), prompt() 等。

• window 下的一个特殊属性 window.name ；

常见事件

窗口加载事件

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

• 有了 window.onload 就可以把 JavaScript 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数；
• window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准；

window.onload = function() {}

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

document.addEventListener 没有限制使用：

• DOMContentLoaded 事件触发时，仅当 DOM 加载完成，不包括样式表，图片，flash 等等；
• IE9 以上才支持；
• 如果页面的图片很多的话，从用户访问到 onload 触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

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

窗口大小改变事件

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

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

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

  window.innerWidth 当前屏幕的宽度；

window.onresize = function(){}
window.addEventListener("resize",function(){});

定时器 setInterval() ：将一个函数每隔一个时间执行一次；

• 第一个参数时回调函数；
• 第二个参数时调用间隔的时间，单位毫秒；
• 返回值是一个 Number 类型的数据，定时器的唯一标识；
• 使用 clearInterval() 关闭一个定时器：接收有效的定时器的标识，则停止对应的定时器。

var num = 1;  
var timer = setInterval(function() {  
	count.innerHTML = num++;  
	if(num == 11) {  
		//关闭定时器  
		clearInterval(timer);  
	}
}, 1000);  

延迟调用 setTimeout() ：一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次；

var timer = setTimeout(function(){
console.log(num++);
},3000);

// 使用clearTimeout()来关闭一个延时调用
clearTimeout(timer);