文章目录

4 JavaScript BOM
- 4.1 BOM概述
- - - 浏览器对象模型
- 4.2 Window对象
- - 4.2.1 弹出框
  - - 弹出框类型
  - 4.2.2 定时事件
  - - 定时器概念
    - 操作定时器
  - 4.2.3 同步与异步
  - - 单线程JS
    - 同步和异步
    - 开启多线程
    - 一个问题
    - 同步任务和异步任务
    - JS执行机制
- 4.3 Location对象
- - 4.3.1 基本概念
  - - Location对象
    - URL
    - URL格式组成
  - 4.3.2 常见属性
  - 4.3.3 常见方法
- 4.4 navigator对象
- - 4.4.1 基本概念
  - 4.4.2 判断终端
- 4.5 history对象
- - 4.5.1 基本概念
  - 4.5.2 常见方法

4 JavaScript BOM

4.1 BOM概述

浏览器对象模型

BOM也称为浏览器对象模型，它不存在官方标准。
现代浏览器几乎实现了JS交互相同的方法和属性，因此它经常作为BOM的方法和属性被提到。

4.2 Window对象

4.2.1 弹出框

弹出框类型

弹出框类型	说明	示例	返回值
警告框	用户需要单击确定来继续	window.alert(“sometext”)	void
确认框	用户需要单击确定或取消来继续执行	window.confirm(“sometext”)	true或false
提示框	用户需要单击确定或取消来继续执行	window.prompt(“sometext”,“defaultText”)	输入值或NULL

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>window.addEventListener('load',function(){var btn1 = document.querySelector('.btn1');btn1.onclick = function(){alert("警告框");}var btn2 = document.querySelector('.btn2');btn2.onclick = function(){confirm("确认框");}var btn3 = document.querySelector('.btn3');btn3.onclick = function(){prompt("提示框");}})</script><button class = "btn1">测试按钮1</button><button class = "btn2">测试按钮2</button><button class = "btn3">测试按钮3</button>
</body>
</html>

4.2.2 定时事件

定时器概念

说明：window对象运行以指定的时间间隔执行代码，这些时间间隔称为定时事件。

操作定时器

作用	示例	说明
开启定时器	setInterval(函数,间隔时间)	每隔一段时间调用函数，间隔时间为毫秒，一旦开启不会自动停止
清除定时器	clearInterval(定时器变量)	去除定时器
开启延时器	setTimeout(函数，间隔时间)	延迟一段时间后调用函数，间隔时间为毫秒，函数只执行一次

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 测试定时器开关 --><div id = "div1">测试内容1</div><button id = "btn1">测试按钮1——开始定时器</button><button id = "btn2">测试按钮2——结束定时器</button><!-- 测试延时器 --><div id = "div3">测试内容3</div><button id = "btn3">测试按钮3——开始延时器</button><script>/*-------------------测试定时器-------------------*/var btn1 = document.getElementById('btn1');var btn2 = document.getElementById('btn2');var div1 = document.getElementById('div1');var timer;//声明定时器对象var number = 0;//设置一个变量btn1.onclick = function(){timer = setInterval(function(){div1.innerText = number++;},1000)}btn2.onclick = function(){clearInterval(timer);}/*-------------------测试延时器-------------------*/var div3 = document.getElementById('div3');var btn3 = document.getElementById('btn3');btn3.onclick = function(){setTimeout(function(){div3.innerText = '测试内容3已经改变';},1000);}</script>
</body>
</html>

4.2.3 同步与异步

单线程JS

JS的一大特点就是单线程，也就是同一个时间只能做一件事。比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加，之后再删除。

同步和异步

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JS脚本创建多个线程，于是JS出现了同步和异步。

同步：前一个任务结束后再执行后一个任务，程序的执行顺序和任务的排列顺序一致。
异步：在做一件事时这件事会很费时，我们可以做这件事的同时去处理其他事。

开启多线程

开启多线程的方式是利用回调函数。

<script>console.log(1);setTimeout(function(){console.log(3);},3)console.log(2);</script>

一个问题

下面代码的输出结果仍然是1,2,3，这是为何？不是已经设置延时器的延时为0了吗。

<script>console.log(1);setTimeout(function(){console.log(3);},0)console.log(2);</script>

同步任务和异步任务

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

异步任务：JS的异步通过回调函数实现。异步任务相关的回调函数添加到任务队列（也叫消息队列）中。

JS执行机制

JS的执行顺序如下：
先执行执行栈中的同步任务
异步任务放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进行执行栈，开始执行

4.3 Location对象

4.3.1 基本概念

Location对象

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

URL

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

URL格式组成

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

组成	说明
protocol	通信协议，常用的http，ftp，maito等
host	主机（域名）
port	端口号，可选，省略时使用方案的默认端口
path	路径，一般用于表示主机上的一个目录或文件地址
query	参数，以键值对的形式通过&符号分隔开
fragment	片段，#后面内容常见于链接或锚点

4.3.2 常见属性

console.log(location);          //输出location对象
console.log(location.href);     //输出当前地址的全路径地址
console.log(location.origin);   //输出当前地址的来源
console.log(location.protocol); //输出当前地址的协议
console.log(location.hostname); //输出当前地址的主机名
console.log(location.host);     //输出当前地址的主机
console.log(location.port);     //输出当前地址的端口号
console.log(location.pathname); //输出当前地址的路径部分
console.log(location.search);   //输出当前地址的?后边的参数部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{margin: 0 auto;background-color: pink;text-align: center;margin-top:40px;height: 100px;width: 300px;}</style>
</head>
<body><div>暂时找不到页面，五秒钟之后跳转到百度首页</div><script>var div = document.querySelector('div');window.setTimeout(function(){location.href = "https://www.baidu.com/";},3000)</script>
</body>
</html>

4.3.3 常见方法

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

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>window.addEventListener("load",function(){var btn1 = document.querySelector('.btn1');var btn2 = document.querySelector('.btn2');var btn3 = document.querySelector('.btn3');btn1.onclick = function(){location.assign("https://www.baidu.com")}btn2.onclick = function(){location.replace("https://www.baidu.com")}btn3.onclick = function(){location.reload();}})</script><button class = "btn1">跳转页面</button><button class = "btn2">替换页面</button><button class = "btn3">刷新页面</button>
</body>
</html>

4.4 navigator对象

4.4.1 基本概念

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

4.4.2 判断终端

下面的代码可以判断用户使用哪个终端打开页面，并实现跳转。

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowerNG|WebOS|Symbian|Windows Phone)/i))){window.location.href = "";//手机
}else{window.location.href = "";//电脑
}