JS BOM(浏览器对象模型)

目标：

• 能够说出什么是BOM
• 能够知道浏览器的顶级对象window
• 能够写出页面加载事件以及注意事项
• 能够写出两种定时器函数并说明区别
• 能够说出JS执行机制
• 能够使用location对象完成页面之间的跳转
• 能够知晓navigator对象涉及的属性
• 能够使用history提供的方法实现页面刷新

BOM概述

BOM：浏览器对象模型，浏览器窗口进行交互的对象，其核心对象是window，由一系列对象构成，每个对象都提供了很多方法和属性

BOM比DOM更大

BOM的构成

它的顶级对象是window：

它是浏览器窗口进行交互的对象

它是一个全局对象，

window对象的常见事件

窗口加载事件

window.onload = function(){}

页面所有元素代码加载完执行

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

页面所有元素代码加载完执行

window.addEventListener('DOMcontentLoaded',function(){})

不需要加载图片等页面就出现

调整窗口大小事件

window.onresize = function(){}

window.addEventListener(‘resize’,functon(){});

定时器

window.setInterval()

window.setTimeout()

JS的执行机制

JS是单线程

JS的一大特点就是单线程，也就是说，同一时间只能做一件事。这是因为JS这门脚本语言诞生的使命所致——js为处理页面中用户的交互，以及操作DOM而诞生。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。

同步和异步

• 同步任务：需要执行的任务在主线程上排队，一个接一个，前一个完成了再执行下一个
• 异步任务：没有马上被执行但需要执行的任务，存放在“任务队列”（task queue）中，“任务队列”会通知主线程什么时候哪个异步任务可以执行，然后这个任务就会进入主线程并被执行。

同步任务和异步任务

• 同步任务都在主线程上执行，形成一个执行栈

• 异步任务是通过回掉函数实现的

• 一般而言，异步任务有以下三种类型：

  普通事件，如click 、resize 等

  资源加载，如load、error等

  定时器，包括setInterval,setTimeout等

  把异步任务相关的回溯函数添加到任务队列中（消息队列）

JS执行机制

1. 先执行执行栈中的同步任务
2. 异步任务（回溯函数）放到任务队列
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进行执行，开始执行；

[外链图片转存失败(img-vi5Vvnvw-1566354291618)(C:\Users\chenqiao\AppData\Roaming\Typora\typora-user-images\1564747749137.png)]

location对象

window对象给我们提供了location属性用于获取或设置窗口的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

URL

统一资源定位符(URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

https://blog.csdn.net/qq_41720311/article/details/83865118

• URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。

• **格式：**protocol ?/ hostname[:port] / path / [;parameters][?query]#fragment

• protocol（协议）

  指定使用的传输协议，下表列出 protocol 属性的有效方案名称。 最常用的是HTTP协议，它也是目前WWW中应用最广的协议。

• hostname（主机名）

  是指存放资源的服务器的域名系统(DNS) 主机名或 IP 地址。有时，在主机名前也可以包含连接到服务器所需的用户名和密码（格式：username:password@hostname）

• port（端口号）

  整数，可选，省略时使用方案的默认端口，各种传输协议都有默认的端口号，如http的默认端口为80。如果输入时省略，则使用默认端口号。有时候出于安全或其他考虑，可以在服务器上对端口进行重定义，即采用非标准端口号，此时，URL中就不能省略端口号这一项。

• path（路径）

  由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

• parameters（参数）

  这是用于指定特殊参数的可选项。

• query(查询)

  可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP。NET等技术制作的网页）传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开。

• fragment（信息片断）

  字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。

  location对象方法

  location对象方法	返回值
  location.assign()	跟href一样，可以跳转页面（也称为重定位）
  location.replace()	替换当前页面，因为不记录历史，所以不能后退
  location.reload()	重新加载页面，相当于刷新按钮或 f5 如果参数为true强制刷新 Ctrl+f5

navigator对象

可以判断用户所用浏览器的相关信息：userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。

history对象

history对象的方法	结果
history.back()	页面后退
history.forward()	页面前进
history.go()	页面往前或往后 1前进 ，-1后退

) | 页面后退 |
| history.forward() | 页面前进 |
| history.go() | 页面往前或往后 1前进 ，-1后退 |

• 点赞
• 收藏
• 分享
• 文章举报

菜鸟求学中 发布了3 篇原创文章 · 获赞 0 · 访问量 84 私信 关注