BOM(浏览器对象模型）

一，BOM概述

BOM(Browser Object Model) 浏览对象模型，其提供独立于内容而与浏览器窗口进行交互的对象，并由一系列相关的对象构成，且每个对象都提供了很多方法与属性。

核心对象是window。

注意：BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，而BOM最初是Netscape浏览器标准的一部分。

DOM与BOM的对比:

二，BOM的构成

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

  1.是js访问浏览器窗口的一个接口。

  2.是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。
  (在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert（），prompt（）等)

三，Window 对象的常见事件

窗口加载事件

当我们想把JS代码写到页面元素的上方时，就可以使用窗口加载事件

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

书写方式：

window.onload = function(){
//但传统的以上注册方式只能写一次，如果有多个，将以最后一个为准

window.addEventListener("load",function(){});
//不会受使用次数的影响

但是当页面的样式表或者图片很多的情况下，从访问到触发onload事件需要很长一段时间，此时可以运用以下事件：

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

因此我们将load与DOMContentLoaded进行比较

事件类型	说明
load	等页面类容（页面dom元素、图片、flash、css等）全部加载完毕才会被触发
DOMContentLoaded	在dom加载完毕（不包括图片、flash、css等）

窗口大小调整事件

当我们想要做一个响应式布局时或当浏览器窗口大小发生变化触发一个事件时，就可以运用window.onresize（调整窗口大小加载事件）

基本语法：

window.onresize = function(){}

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

注：常与windoe.innerwidth(窗口页面大小像素来搭配使用）

setTimeout 定时器

setTimeout方法用于设置一个 定时器，在定时器到期后调用函数

基本语法：

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

注：

• window在使用时可以省略
• 单位是毫秒，如果没有设置数值，则默认为0
• 页面中存在多个定时器时，给每个定时器都加上名字

当我们想要清除清除定时器时可以运用clearTimeout事件

基本语法：

window.clearTimeout(timeoutID)

注：timeoutID为设置的定时器的名字

setInterval()定时器

当我们想要每隔一个时间就反复调用一个函数，就可以运用setInterval()方法执行

基本语法：

window.setInterval(回调函数,[间隔毫秒数]);

同理其注意事项与setTimeout相同

同样当我们想要停止该方法时可以使用clearInterval()方法来清除

基本语法：

window.clearInterval(intervalID);

四，location 对象

window 对象提供location属性来获取、设置或解析窗口的URL（Uniform Resource Locator 统一资源定位符，是互联网上标准资源的地址。互联网上的每个文件都有唯一一个URL，其包含的信息指出文件的位置以及浏览器应该怎么处理他）

常见属性：

常见方法：

方法	返回值
location.assign（）	实现跳转页面
location.replace（）	替换当前页面，但不记录历史，不能后退页面
location.reload（）	重新加载页面，相当于刷新按钮，如果参数为true强制刷新

五，this指向问题

• 在全局作用域或者普通函数this关键字指向全局对象window（定时器中的this指向的是window）
• 方法调用中谁调用this就指向谁
• 构造函数中this指向构造函数的实例

六， 同步与异步（网课扒下来）

JavaScript语言的一大特点就是单线程（同一个时间只能做一件事——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生) ,当我们要对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

因此单线程就意味着，所有任务都需要排队，前一个任务结束，才会执行后一个任务，这样所导致的问题是：如果JS执行时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，于是，JS中出现了同步和异步。

同步：
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

异步：
在做一件事时，因为这件事会花费很长时间，在做这件事的同时，还可以去处理其他事情。