【JavaScript】JS中的浏览器对象模型BOM

最新推荐文章于 2024-01-02 20:06:47 发布

Composition55555

最新推荐文章于 2024-01-02 20:06:47 发布

阅读量151

点赞数

文章标签： javascript js bom

本文链接：https://blog.csdn.net/weixin_41619240/article/details/109494312

版权

【笔记】2020入门笔记专栏收录该内容

32 篇文章 4 订阅

订阅专栏

一、基本概念

01. BOM概述

BOM（ Browser Object Model）即浏览器对象模型
- 提供了独立于內容而与浏览器窗口进行交互的对象，其核心BOM由一系列相关的对象构成，每个对象都提供了方法与属性
BOM的顶级对象是 window
- window对象是浏览器的顶级对象
- 是JS访问浏览器窗口的一个接口
- 是一个全局对象：定义在全局作用域中的变量、函数都会变成window对象的属性和方法
- 在调用的时候可以省略 window

02. 基本要求

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

二、常见window事件

01. 窗口加载事件

window.onload
- 窗口加载事件，当文档内容完全加载完成后，才执行
- 用传统的注册事件方式，只能写一次，以最后一个为准
- 可以用addEventListener，添加多个
- 作用：可以让JS代码放在页面
```
window.onload = function(){
    // 当页面文档内容完全加载完成后，才执行这里的内容，只能有一个
};
```
```
window.addEventListener("load",function(){
    //可以写多个
});
```
DOMContentLoaded
- 该事件触发时，仅当DOM加载完成，且不包括样式表、图片、Flash等等
- 如果页面的图片很多的话，从用户访问到 window.onload触发，可能需要较长的时间，交互效果可能无法实现，此时用 DOMContentloaded 事件比较合适（大型网站）
```
document.addEventListener("DOMContentloaded",function(){
    // DOM加载完即执行
});
```
pageshow
- 重新加载页面触发事件

02. 调整窗口大小事件

resize
- 当浏览器窗口发生变化时，就执行内部代码
```
window.addEventListener("resize",function(){
    
});
```

03. 定时器

setTimeout()
- 设置一个定时器，该定时器在时间到之后，执行调用函数
```
window.setTimeout(调用函数，延时时间);
```
  window 可以省略
  
  延时时间单位是毫秒，但是可以省略，省略默认是0
  
  这个调用函数可以直接写函数，或者写函数名，或者字符串形式 ”函数名()“
  
  页面中可能有很多的定时器，我们经常给定时器通过赋值设定标识符 （名字)
- 清除定时器
  - window.clearTimeout(标识符)
```
var timer = setTimeout(function(){
    console.log("我花了5s才显示！");
},5000);

clearTimeout(timer);
```
setInterval()
- 设置一个定时器重复调用这一个函数，每隔一段时间，就调用一次回调函数
```
window.setInterval(回调函数，间隔时间);
```
  window 可以省略
  
  延时时间单位是毫秒，但是可以省略，省略默认是0
  
  这个调用函数可以直接写函数，或者写函数名，或者字符串形式 ”函数名()“
  
  可以给定时器赋值设置标识符 （名字)
- 停止定时器
  - window.clearInterval(标识符)
```
var timer = setInterval(function(){
    console.log("我每隔5s写一次！");
},5000);

clearInterval(timer);
```
回调函数
- 普通函数是按照代码顺序直接调用而这个函数
- 而定时器的函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数
- 简单理解：回调，就是回头调用的意思，上一件事干完，再回头调用这个函数
  
  如：点击触发的事件函数，点击之后再调用这个函数；定时器，时间到后再调用这个函数

this指向
- （1）this的指向在函数定义的时候是无法确定的
  - 只有函数执行的时候才能确定this到底指向谁
- （2）一般情况下，this的最终指向的是那个调用它的对象
- （3）其它情况：
- 全局作用域或者普通函数中：this指向全局对象window
  - 【注意】：定时器里面的this也指向window
  - 方法调用中：this指向调用者
  - 构造函数中：this指向构造函数的实例

三、JS执行机制

01. JS是单线程

同一时间只能做一件事
所有任务需要排队，前一个任务结束，才会执行后一个任务
导致的问题是：
- 如果丿S执行的时问过长，就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

02. 同步和异步

HTML5提出Web Worker标准，允许JS创建多个线程

（1）同步和异步

同步
- 前一个任务结束后，再执行后一个任务
- 程序的执行顺序与任务的排列顺序是一致的、同步的
  
  比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，再煮菜
异步
- 同时进行多个任务
  
  比如做饭的异步做法：我们在烧水的同时，利用这10分钟，去切菜；等烧完水，就可以直接煮菜了

（2）同步任务和异步任务

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

异步任务通过回调函数实现
- 三种类型
  - 普通事件，如click、resize等
  - 资源加载，如load、error等
  - 定时器，如setTimeout()、setInterval()等

03. 执行机制

事件开始：

（1）执行主线程上的同步任务

（2）如果执行过程中遇到异步任务，则异步任务会提交给异步进程处理

（3）异步进程处理会判断异步任务的触发状态，触发后则进入任务队列中等待，不执行

（4）在主线程上的同步任务执行完毕后，主线程会查询任务队列，从中取出一个等待中的异步任务

（5）被取出的异步任务插入主线程的末尾，开始执行，执行完毕后继续查询、获取、执行任务队列
关键名词：
- 异步进程处理：异步任务在放入任务队列之前，会进入异步进程处理，用于判断异步任务进入任务队列的触发状态，触发后才进入任务队列排队
  
  如：点击后进入任务队列，时间到后进入任务队列等等
- 事件循环：由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环event loop
理解
- 执行栈：主车道
- 执行任务：应急车道
- 执行时，优先让主车道中的【车】通过，而异常状态的【车】进入应急车道进行异常状态【处理】，在主车道的【车】通过后，应急车道的【车】也处理完了，再通过，这样就不会阻塞主车道

四、`location`对象

01. 概念

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

02. 关于URL

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

语法结构

protocol://host[:port]/path/[?query]#fragment 

http://www.itcast.cn/index.html?name=andy&age=18#link

03. `location`对象的属性

location对象属性	返回值
location.href	获取或设置 URL
location.host	返回主机（域名）
location.port	返回端口号，没有则为空字符串
location.pathname	返回路径
location.search	返回参数，（？及后面的所有参数）
location.hash	返回片段，#后面的内容，常见于链接、锚点

location对象方法	返回值
location.assign()	跳转页面，重定向页面，可以后退页面
location.replace()	替换当前页面，不能后退页面（不记录浏览历史）
location.reload()	重新加载页面，刷新页面，强制刷新——括号（true）