WebAPI编程（3）——BOM浏览器对象模型

BOM浏览器对象模型

1、BOM概述

BOM 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

2、window 对象的常见事件

窗口加载事件 window.onload = function() {}；window.addEventListener(‘DOMContentLoaded’，function() {})；window.onload 是窗口加载事件，当文档内容完全加载完成才会触发该事件；DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash等等；有了window.onload 就可以把JS代码写到页面元素的上方，window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload 为准；addEventListener 则没有限制 调整窗口大小事件 window.onresize = function() { };window.addEventListener(“resize”，function() { });window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数；只要窗口大小发生像素变化，就会触发这个事件；window.innerWidth 当前屏幕的宽度

3、定时器

setTimeout() window.setTimeout(调用函数，[延迟的毫秒数]);调用函数可以直接写函数，或者写函数名，或者采取字符串‘函数名()’三种形式window.clearTimeout(timeoutID)：取消了先前建立的定时器每次只调用一次函数 setInterval() window.setInterval(回调函数，[间隔的毫秒数]);重复调用一个函数，每隔这个时间，就去调用一次回调函数

4、JS 执行机制

同步任务：同步任务都在主线程上执行，形成一个指向栈 异步任务：通过回调函数实现，有三种类型

普通事件，如click、resize等资源加载，如load、error等定时器，包括setInterval、setTimeout等

JS执行步骤：

先执行执行栈中的同步任务异步任务放入任务队列中按次序读取任务队列中的异步任务，将异步任务放入执行栈，开始执行

5、location 对象

5.1 location 对象

location 对象：window对象提供了一个location 属性用于获取或设置窗口的URL，并且可以用于解析URL，这个属性成为location 对象

5.2 URL

URL：是互联网上标准资源的地址，互联网上每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。URL的一般语法格式为： protocol://host[:port]/path/[?query]#fragment protocol——通信协议，常用的http、ftp、maito等 host——主机域名，例如 www.baidu.comport——端口号，省略时使用方案的默认端口path——路径，由 零或多个‘/’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址query——参数，以键值对的形式，通过&符号分隔开来fragment——片段 #后面内容 常见与链接 锚点

5.3 location 对象的属性

location.href——获取或者设置整个URLlocation.host——返回主机（域名）location.port——返回端口号location.pathname——返回路径location.search——返回参数location.hash——返回片段

5.4 location对象的方法

location.assign()——跳转页面，记录历史，可以回退历史页面location.replace()——替换当前页面，不记录历史，不能后退页面location.reload()——重新加载页面

6、navigator 对象

navigator对象包含有关浏览器的信息 userAgent 可以返回由客户机发送服务器的user-agent头部的值

7、history 对象

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

back()——后退功能forward()——前进功能go(参数)——参数为1，前进1个页面；参数为-1，后退1个页面