BOM基础

BOM基础

1、概述

1、BOM时浏览器对象模型，提供了专注于浏览器及进行交互的对象，其核心是window。

DOM：

• 文档对象模型
• DOM就是将“文档”作为一个“对象”看待
• DOM顶级是document
• 主要用来操作页面

BOM：

• 浏览器对象模型
• 把“浏览器”当做一个“对象”来看待
• BOM的顶级对象是window
• 主要用于与浏览器窗口进行交互

2、构成：

window对象时浏览器的顶级对象

• 既可以作为js访问浏览器的接口
• 又是一个全局对象，定义在全局作用域中的变量、对象都会变成window对象的属性和方法

在调用时可以省略window，如：alert()、prompt()

注意：window下的一个特殊属性window.name，所以尽量不要用name做为变量名

2、常见事件

1、窗口加载事件

监听到页面加载后执行回调函数

// 页面完全加载完成
window.onload = function () {}	// 加载多个时，会以最后一个为准
或者
window.addEventListener('load',function () { });	// 加载多个无限制
// ----------------------------------

// 当dom加载完成就会执行
window.addEventListener('DOMContentLoaded',function () { });
// ----------------------------------

window.addEventListener('pageShow',function () { });

以下三种情况会触发load：

• a标签的超链接
• F5或刷新按钮
• 前进后退按钮

三个页面加载事件的区别：

​ 1、window.onload是窗口加载事件，当文档中内容完全加载（包括样式、图片、flash等）完成后会触发

​ 2、与DOMContentLoaded事件触发时，仅仅当dom加载完成（不包括样式、图片、flash），ie9以上才支持。适用于图片很多的情况下，这个会加载js

​ 3、在火狐浏览器中点返回上一页面是从缓存中拿，所以不触发load监听，但是触发pageShow的监听，其余的load与pageShow的触发相同

2、窗口大小调整事件

window.onresize = function () {}
// 或者
window.addEventListener('resize', function () {});

注：

• 只要窗口大小发生像素变化，就会触发
• 可以用此事件做响应布局，通过设置window.innerWidth（当前浏览器屏幕的宽度）

3、定时器

window.setTimeout 和 window.setInterval

1、window.setTimeout(调用函数，延迟时间);

• 只会调用一次

setTimeout(调用函数，延迟时间);
例：
function a(){alert('a')};
方式1：let timer1 = setTimeout(a, 2000);
方式2：let timer2 = setTimeout('a()', 2000)	// 不提倡

// 停止定时器的方法:
clearTimout(timer1);

2、window.setInterval(调用函数，延迟时间);

• 会一直重复调用

（使用方式同上）

清除：clearInterval(timer);

3、this

this指向：

• 一般情况下this指向最终调用他的那个对象

• 全局作用域或者普通函数（只定义，未调用情况）中的this指向window（定时器中的this直接指向window，而不是调用它的方法）

• 构造函数中的this指向实例对象：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-itC9xslM-1659880967761)(C:\Users\Q\AppData\Roaming\Typora\typora-user-images\image-20220730095440072.png)]

4、js的执行机制

js是单线程，同一时间只能做一件事

同步和异步

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

异步：前一个任务未结束就去执行另一个任务，执行顺序与任务排列顺序不一致

（并发并行可以实现异步，但异步并不是非得并发并行，单线程也可以）

4.1 js执行流程

js将任务分为两类：同步任务放到主线程执行栈，异步任务放到消息队列中

注：一般而言，普通事件（click、resize…）、资源加载（load、error…）、定时器（setInterval、setTimeout…）等的回调函数都是异步的。js的异步就是通过回调函数来实现的。

• 执行时，先执行主线程执行栈中的同步任务，遇到有回调函数的就将回调函数放到消息队列（先进先出）中。
• 主线程栈执行结束后，再去消息队列中依次读出任务队列中的异步任务，异步任务进入主线程执行栈，开始执行。
• 在主线程任务栈执行完毕后，主线程任务栈会不断的去看消息队列中是否有任务，如果有就立马执行，这个一直持续的过程称为事件循环（event loop），这也就是我们事件的原理。
  • 如点击事件：在点击后，回调函数就会进入任务队列，又被主线程任务栈监听到后拿过去执行，就形成了一次点击事件的监听与执行
• 如下图（此图来自网上搜索，如有侵权请联系删除）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bQRaNlHt-1659880967765)(C:\Users\Q\AppData\Roaming\Typora\typora-user-images\image-20220730104403360.png)]

console.log(1);
setTimeout(function(){
   console.log(2); 
}, 0);
console.log(3);

//--------------
输出结果：
1
3
2

5、location对象

5.1 location的介绍

window对象提供的location属性用于获取窗体的url，并且可以解析url。因为他返回的是一个对象，所以我们将这个属性称为location对象。

URL参数格式为：

protocol://host[:port]/path/[?query]#fragment
如：
http://127.0.0.1:8080/b/a.html?type=1&show=1#link

组成	说明	location对应的属性
protocol	通信协议，如：http、https…
host	主机	location.host
port	端口	location.port
path	路径	location.pathname
query	参数	location.search
fragment	#后面内容常见于链接、锚点	location.hash
		location.href：获取整个地址

5.2 location常见方法

对象方法	返回值
location.assign(url)	重定向页面
location.replace(url)	替换当前页面，不可后退
location.reload()	重新刷新此页面

6、navigator对象

​ navigator对象包含有关浏览器的相关信息，常用的是userAgent，该属性可以返回客户机发送服务器的user-agent头部的值

注：这里是navigator不是navigation

7、history对象

方法	说明
back()	回退到上个页面
forward()	前进一个页面
go(num)	num为正数就前进num个页面，num为复数就回退num个页面