BOM

浏览器对象模型（BOM）使 JavaScript 有能力与浏览器"对话"。它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

DOM与BOM对比

DOM	BOM
文档对象模型	浏览器对象模型
把文档当作一个对象来看待	把浏览器当作一个对象来看待
顶级对象是document	顶级对象是window
学习操作页面元素	学习浏览器窗口交互的对象
W3C标准规范	缺乏标准，兼容性较差

BOM的构成

Window对象

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

弹出框

window.alert("111");
window.confirm("222");
window.prompt("请输入你的学校：");

以上三种方法可以不带window前缀来编写。

窗口加载事件

window.onload=function(){}

或者

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

onload是等页面内容全部加载完毕，再去执行处理函数
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个为准
使用addEventListener则没有限制

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

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等。
当页面的图片很多时，用onload触发需要较长时间，用DOMContentLoaded事件更合适。

调整窗口大小事件

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

只要窗口发生像素变化就会触发该事件
window.innerWidth当前屏幕的宽度
window.innerHeight 当前屏幕的高度

定时事件

window.setTimeout(调用函数，[延迟的毫秒数])

用于设置一个定时器，定时器到期后执行调用函数，只调用一次
延迟时间单位是毫秒，但是可以省略，省略就默认为0
window可以省略

 <script>
       function callback(){
        console.log('滴答滴答');
       }
    //    写法一
       var timer1 = setTimeout(callback,3000);
    //    写法二，不提倡
       setTimeout('callback()',3000);
    //    写法三，直接写函数
    </script>

//timer1为局部变量
window.clearTimeout(timer1)

该方法可以取消之前设置的setTimeout()定时器
window可以省略

window.setInterval(调用函数，[间隔的毫秒数])

window可以省略
每隔这个时间，就调用一次函数，会重复调用很多次

//timeoutID必须为全局变量
window.clearInterval(timeoutID)

例：

var timer = null;//全局变量,null是一个空对象
begin.addEventListener('click',function(){
   timer = setInterval(function(){
      console.log('123');
      },1000);  
})
 stop.addEventListener('click',function(){
     clearInterval(timer);
  }

Navigator对象

Navigator对象包含有关浏览器的信息，它有很多属性，常用的是userAgent返回由客户机发送服务器的user-agent头部的值。

Location对象

Location对象用于获取或设置窗体的URL（统一资源定位符），并且可以用于解析URL。 URL的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议常用的http、ftp、maito等
host	主机(域名) www.itcast.con
port	端口号可选，省略时使用方案的默认端口
path	路径，由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数，以键值对的形式通过&符号分隔开来
fragment	片段，#后面内容，常见于链接、锚点

Location对象属性

Location常见方法

History对象

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

Screen对象

Screen 对象中存放着有关显示浏览器屏幕的信息。

Screen对象属性

属性	说明
availHeight	返回显示屏幕的高度 (除 Windows 任务栏之外)
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)
bufferDepth	设置或返回调色板的比特深度
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
deviceXDPI	返回显示屏幕的每英寸水平点数
deviceYDPI	返回显示屏幕的每英寸垂直点数
fontSmoothingEnabled	返回用户是否在显示控制面板中启用了字体平滑
height	返回显示屏幕的高度
logicalXDPI	返回显示屏幕每英寸的水平方向的常规点数
logicalYDPI	返回显示屏幕每英寸的垂直方向的常规点数
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）
updateInterval	设置或返回屏幕的刷新率
width	返回显示器屏幕的宽度

JS执行机制

先执行执行栈中的同步任务
异步任务（回调函数）放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的同步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环

DOM与BOM（四）

BOM