前端_BOM

最新推荐文章于 2024-07-26 15:05:55 发布

safjkbakskdj

最新推荐文章于 2024-07-26 15:05:55 发布

阅读量73

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/safjkbakskdj/article/details/127672337

版权

理解

BOM没有标准，是直接对浏览器进行操作的。其顶级对象是Window对象，由于没有标准，对低版本浏览器兼容性可能不太好。

由于BOM是对整个浏览器进行操作，所以在对象的层面来看DOM是被包含在BOM范围内的

学习内容

页面加载事件

页面加载事件就是在页面加载完毕后会执行的事件。

语法为window.onload()。括号内可以传入一个函数作为参数，当页面的信息被加载后就会执行函数参数的代码

由于onload中的代码是在所有信息都被加载后再被执行的，所以onload中的代码可以无视代码执行时由上到下逐行执行的约束，但是对于其函数内部创建的变量仍需由上到下执行

调整窗口大小事件

当窗口页面大小被更改时就会触发和执行的事件

语法为window.resize()。由于该对象只是一个触发条件，所以我们同样可以输入一个函数作为参数来执行。

通过该功能，可以实现一些和用户的简单交互。

定时器功能

定时器功能即进入计时，达到预定的计时时间后执行对应的语句。常见的计时器有两种，一种是一次性计时器setTimeOut()，另一种是循环计时器setInterval()，在执行后若不进行人为干涉会无限地进行下去。

计时器中可以输入两个参数，第一个参数是一个函数，函数内可以写我们想要执行的语句，函数可以在计时器中现写，也可以先写好，然后将函数名作为参数上传。第二个参数是一个时间，即倒计时，单位是毫秒ms。

当运行到计时器对象时，会先计时，时长是我们输入的第二个参数值，然后执行第一个函数内的语句。对于setTimeOut()执行一次就会停止。但是setInterval()会继续进行下去，其时间参数相当于是每次执行中间的空隙时间。

setTimeOut(() => {
    console.log("hello")
}, 1000)

setInterval(() => {
    console.log("hello")
}, 1000)

如上代码中，setTimeOut在开始执行后先等一秒，然后再控制台输出hello

setInterval则会先等一秒，然年输出hello，然后每隔一秒输出一次hello

定时器可以存储再变量中，所以我们通常可以用一个变量来做定时器的标识符，方便反复使用和清楚定时器

清除定时器

清除定时器允许我们将定时器清除掉

其语法为clearTimeOut()和clearInterval()，分别用来清除setTimeOut和setInterval的定时器。

如上我们所说的，循环计数器在开始后无法停止，通过清除计时器就可以将其停止和释放掉，就可以使循环计时器达到停止的效果

同步和异步操作

先了解一下同步和异步操作的概念

同步：任务按照顺序执行，前一个严格执行完毕再执行下一个，不能同时执行

异步:多个任务可以同时执行

在BOM中同步任务和异步任务是分开存储的，同步任务被集中起来放到一块区域，称为执行栈，异步任务会被集中起来放到异步任务区，且异步任务是通过回调函数来执行的。

在执行时先执行同步任务，再执行异步任务，异步任务在执行时会被移动到执行栈中执行。当用户点击触发新的异步任务时，新的异步任务会被放到执行栈中再执行。

location对象

location对象可以对页面的url地址进行修改

其包含的属性大概有如下几种

属性名	对应内容
href	相当于整个url地址
host	主机域名
port	端口号
pathname	路径
search	参数
hash	返回#或？后面的内容

其对应还有三种方法

方法名	方法作用
assign()	参数就是另一个网页的url地址，保留记录，可以使用回退功能退回到上一界面
replace()	参数也是另一个网页的url地址，不保留记录，无法通过回退退回上一网页
reload()	刷新页面，作用和我们页面左上角的刷新按钮一样