js中的基础知识点 —— BOM

整理学习过程中的 js 知识点，防遗忘 !!!

JavaScript 基础知识点

一、BOM

一、BOM

BOM ：Browser Object Model 为浏览器对象模型。
BOM 为我们提供了一些对象，用来完成浏览器的操作。
对于Navigator、Location、History、Screen 这些对象，是通过window.属性的形式调用的。

1. Window

Window：表示整个浏览器窗口，同时Window也是网页中的全局对象

2. Navigator

Navigator：Navigator表示的是浏览器的信息，可以用来识别不同的浏览器

1）直接使用

代码展示：直接输出navigator

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>BOMtitle>
head>
<script>
  console.log("navigator",navigator);
  console.log("window.navigator", window.navigator);
script>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

显示效果：

在这里插入图片描述

2）userAgent 属性

代码展示：使用navigator.userAgent
userAgent 属性：它返回客户机发送到服务器的 user- agent 头部的值

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>BOMtitle>
head>
<script>
  console.log("userAgent", navigator.userAgent);
script>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

显示效果：在不同的浏览器中显示的效果不同。

1.在chrome浏览器中的返回值
userAgent Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.0.0 Mobile Safari/537.36
2.在firefox浏览器中的返回值
userAgent Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0
3.在Microsoft Edge浏览器中的返回值
userAgent Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 Edg/103.0.1264.71
4.在IE11浏览器中的返回值
userAgent Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
5.IE10浏览器中的返回值
userAgent Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
6.IE9浏览器中的返回值
userAgent Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
7.IE8浏览器中的返回值
userAgent Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
8.IE7浏览器中的返回值
userAgent Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

通过使用 navigator.userAgent 判断浏览器的类型

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>BOMtitle>
head>
<script type="text/javascript">
  var ua = navigator.userAgent;
  if(/chrome/i.test(ua)) {
    alert("这里是Chrome浏览器!!!");
  } else if(/firefox/i.test(ua)) {
    alert("这里是火狐浏览器!!!");
  } else if(/mise/i.test(ua)) {
    console.log("这里是IE浏览器!!!"); //注意，这里不包括IE11，所以使用这种方式可能无法正确判断出对应的浏览器信息
  }
script>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

如果使用userAgent不能判断浏览器的类型，我们可以使用 ActiveXObject来判断 （对于IE）

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>BOMtitle>
head>
<script type="text/javascript">
  var ua = navigator.userAgent;
  if(/chrome/i.test(ua)) {
    alert("这里是Chrome浏览器!!!");
  } else if(/firefox/i.test(ua)) {
    alert("这里是火狐浏览器!!!");
  } else if("ActiveXObject" in window) {
    alert("这里是IE浏览器!!!");   //进行 ActiveXObject 的属性判断
  }
script>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

注意：在判断是否属于IE浏览器时，不能够直接使用 window.ActiveXObject 来进行判断，因为在 ie11 中，虽然有ActiveXObject属性，但是它的布尔值似乎为false

3. Location

Location：浏览器的地址信息

1）直接使用location

代码展示：

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>locationtitle>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      alert(location);
    }
  }
script>
<body>
  <button id="btn">location按钮button>
  <h1>locationh1>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

显示效果：

在这里插入图片描述

2）更改 location的值

location的值更改之后，页面会自动跳转到更改后的新的 location的地址

代码展示：

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>locationtitle>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      location = "https://www.baidu.com/";
    }
  }
script>
<body>
  <button id="btn">location按钮button>
  <h1>locationh1>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

展示效果：

在这里插入图片描述

3）location的 assign() 方法

assign()方法：表示加载新的文档。这个方法与直接修改 location的效果一样。

代码展示：

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>locationtitle>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      location.assign("https://www.baidu.com/"); 
    }
  }
script>
<body>
  <button id="btn">location按钮button>
  <h1>locationh1>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

显示效果：
在这里插入图片描述

4）location的 reload()方法

reload()方法，表示重新加载当前文档。（相当于刷新按钮）

代码展示：

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>locationtitle>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      location.reload(); 
    }
  }
script>
<body>
  <button id="btn">location按钮button>
  <h1>locationh1>
  <input type="text">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

显示效果：

在这里插入图片描述

5）location的 replace()方法

代码展示：

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>locationtitle>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      location.replace("https://www.baidu.com/"); 
    }
  }
script>
<body>
  <button id="btn">location按钮button>
  <h1>locationh1>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

显示效果：
在这里插入图片描述
注意：使用replace()方法时，是没有history的，不支持前进和后退。

4. History

History：浏览器的历史记录，通过该对象可以操作浏览器的历史记录，但由于隐私原因，history主要进行前进或者后退换页

1）length 属性

history中具有 length 属性，它返回浏览器历史列表中的数量

//总体创建3个页面
1.history.html页面
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>historytitle>
head>
<script type="text/javascript">
  alert(history.length);
script>
<body>
  <h1>Historyh1>
  <a href="historypart.html">去historypart页面a>
body>
html>


2.historypart.html页面
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>historyparttitle>
head>
<body>
  <h1>Historyparth1>
  <a href="historypart01.html">去historypart01界面a>
body>
html>

3.historypart01.html页面
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>historypart01title>
head>
<body>
  <h1>historypart01h1> 
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
47
48

显示效果：
在这里插入图片描述

2）back()方法

history.back()方法可以用来回退页面
在 3.historypart01.html 页面中，添加一个按钮，用于完成后退功能

代码展示：

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>historypart01title>
head>
<script type="text/javascript">
  window.onload = function() {
    var btn = document.getElementById("button");
    btn.onclick = function() {
      history.back();
    }
  }
script>
<body>
  <h1>historypart01h1> 
  <button id="button">后退button>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

展示效果：
在这里插入图片描述

3）forward() 方法

history.forward()方法用来前进一个页面。
在2.historypart.html页面中添加了一个前进按钮，通过forward()方法来完成前进操作

代码展示：

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>historyparttitle>
head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      history.forward();
    }
  }
script>
<body>
  <button id="btn">前进button>
  <h1>Historyparth1>
  <a href="historypart01.html">去historypart01界面a> 
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

展示效果：
在这里插入图片描述

4）go() 方法

在1.history.html页面中添加按钮，进行history.go()方法的操作

代码展示：

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>historytitle>
head>
<script type="text/javascript">
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      history.go(2); //跳转2个页面，就是说到达了第三个页面
      //可以随意设置go的参数，其中正值为前进，负值为后退
      //eg:history.go(-1)：表示后退一个页面
    }
  }
script>
<body>
  <button id="btn">随意button>
  <h1>Historyh1>
  <a href="historypart.html">去historypart页面a>
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

展示效果：
在这里插入图片描述

5. Screen

Screen：用户的屏幕信息，可以读取用户显示器的信息

6. 浏览器内核简介

浏览器内核是指浏览器运行的最核心的程序。分为两个部分：渲染引擎和JS引擎
当前主流的浏览器有 IE/Edge、Chrome、Firefox、Opera、Safari等

浏览器	渲染内核	JS引擎
IE / Edge	Trident(<= IE10); EdgeHTML	JScript(
Chrome	Chromium(Webkit); Blink	V8
Firefox	Gecko	SpiderMonkey(< 3.0); TraceMonkey(< 3/6)；JaegerMonkey(4.0+)
Safari	Webkit/Webkit2	JSCore/Nitro(4+)
Opera	blink	Futhark(9.5-10.2); Carakan(10.5)

相关阅读:
YOLOv8 热力图可视化 | 已适配最新版
 shuffle文件损坏导致nodemanager重启失败
 都说“存算分离”好，分布式数据库为何还要“进一步分离”？
微服务治理浅谈
 JAVA通过JNA 调用c++动态链接库
 python-opencv之形态学操作（腐蚀和膨胀）原理详解
 Blender--》页面布局及基本操作讲解
 【JavaScript】js判断一个变量是数组
 韩语难学吗
 JAVA8 - java.util.function.Predicate
原文地址：https://blog.csdn.net/Matcha_ice_cream/article/details/126005134