JS BOM(浏览器对象模型)

最新推荐文章于 2023-03-13 23:27:23 发布

菜鸟求学中

最新推荐文章于 2023-03-13 23:27:23 发布

阅读量235

点赞数

分类专栏： javascript笔记文章标签： JS BOM 笔记

本文链接：https://blog.csdn.net/qq_42555384/article/details/99941962

版权

javascript笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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执行机制

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

[外链图片转存失败(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