一幅长文细学JavaScript（四）——BOM
【摘要】
文章目录
4 JavaScript BOM4.1 BOM概述浏览器对象模型
4.2 Window对象4.2.1 弹出框弹出框类型
4.2.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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
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
- 4
- 5
- 6
- 7
- 8
- 9
一个问题
下面代码的输出结果仍然是1,2,3，这是为何？不是已经设置延时器的延时为0了吗。
<script>
console.log(1);
setTimeout(function(){
console.log(3);
},0)
console.log(2);
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
同步任务和异步任务
同步任务：同步任务都在主线程上执行，形成一个执行栈。
异步任务：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); //输出当前地址的?后边的参数部分
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
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 = "";//电脑
}
- 1
- 2
- 3
- 4
- 5
4.5 history对象
4.5.1 基本概念
window对象给我们提供一个history对象，与浏览器历史记录进行交互，该对象包含用户访问过的URL。
4.5.2 常见方法
| history对象方法 | 作用 |
|---|---|
| back() | 后退功能 |
| forward() | 前进功能 |
| go(参数) | 前进后退功能，参数如果是1则前进一个页面，如果是-1则后退一个页面 |
文章来源: blog.csdn.net，作者：ArimaMisaki，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/chengyuhaomei520/article/details/126359826
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）