初识BOM

1.BOM定义

（1）BOM是浏览器对象模型，提供了独立于内容，但与浏览器窗口进行交互的对象。

（2）BOM是由一系列相关的对象构成，且每个对象都提供了很多方法与属性，其核心对象是window

（3）BOM与DOM的对比

• BOM是浏览器对象模型，DOM是文档对象模型
• BOM是把浏览器当做一个对象，DOM是把文档当做一个对象
• BOM的顶级对象是window，DOM的顶级对象是document

（4）BOM组成

2.window简介

（1）window概述

• window对象是浏览器的顶级对象。
• 其也是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法；
• 在调用的时候可以省略window，alert（）、prompt（）等对话框属于window对象方法。
• window的一个特殊属性：window.name，其会返回一个空的字符串，其本身有意义。所以在声明变量时不要用name做变量名

（2）window常见事件

A. 窗口加载事件：即先等文档内容全部加载完毕后，再执行处理函数。

• 语法：
  

• 用window.onload就可以把JS代码写到页面元素的上方；

• window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准；使用addEventListener没有限制。

• *oad是等页面内容全部加载完毕，包含页面的dom元素，如图片、flash、css等；

• DOMContentLoaded是dom加载完毕，不包含图片、flash等就可以执行，加载速度比load快

B.调整窗口大小事件

• 语法：
  
• 只要窗口大小发生像素变化，就会触发这个事件
• window.innerWidth是当前屏幕的宽度

3.定时器

（1）回调函数

• 普通函数是按照代码顺序直接调用，而回调函数是，需要等待时时间，时间到了才去调用这个函数。
• element.onclick=function(){}或者element.addeventListener(“click”，fn）也是回调函数，因为它是点击之后才会执行该函数

（2）setTimeout()定时器

• setTimeout(function() {},延迟的毫秒数)，window在调用时可以省略，可以直接写setTimeout()
• 延时时间是ms，可省略，若省略，默认值为0；比如setTimeout(function() {},2000)，即延迟2s之后执行function
• 该调用函数可以直接写函数
• 还可以直接写函数名
• 还可以‘函数名（）’（不推荐）
• PS：页面中可能有很多的定时器，可给定时器加标识符（名字）

（3）停止setTimeout()定时器

• 语法：window.clearTimeout(timeoutID)
• window可省略，（）的参数是定时器的名字

（4）setInterval（）定时器

• setTimeout(function() {},间隔的毫秒数)
• 同setTimeout()定时器
• 区别：setTimeout()是延时时间到了就去调用这个回调函数，只调用一次，该定时器结束；setInterval（）每隔这个延时时间，就会去调用这个回调函数，会调用很多次（重复调用）

4.Screen

• 对象包含用户屏幕的信息
• 属性有width返回访问者屏幕宽度
• height返回访问者屏幕高度）
• availWidth（属性返回访问者屏幕的宽度，减去诸如窗口工具条之类的界面特征。）等
• screen.pixelDepth 属性返回屏幕的像素深度；
• screen.colorDepth 属性返回用于显示一种颜色

5.Location

• 获取当前页面地址（URL）并把浏览器重定向到新页面
• window.location.href 属性返回当前页面的 URL。
• window.location.hostname 属性返回（当前页面的）因特网主机的名称
• window.location.pathname 属性返回当前页面的路径名。
• window.location.protocol 属性返回页面的 web 协议。
• window.location.port 属性返回（当前页面的）互联网主机端口的编号。
• window.location.assign() 方法加载新文档。

6.history

• 包含浏览器历史。window.history 对象可不带 window 书写。
• history.back() 方法加载历史列表中前一个 URL
• history forward() 方法加载历史列表中下一个 URL。

7. Navigator

• 对象包含有关访问者的信息。
• navigator.appName返回浏览器的应用程序名称
• navigator.appCodeName返回浏览器的应用程序代码名称
• navigator.product返回浏览器引擎的产品名称
• navigator.appVersion返回有关浏览器的版本信息
• navigator.userAgent回由浏览器发送到服务器的用户代理报头
• navigator.platform返回浏览器平台