js中的基础知识点 —— BOM

已于 2022-07-28 10:12:38 修改
阅读量705 收藏 1
点赞数
分类专栏： # js 文章标签： javascript firefox 前端
于 2022-07-27 20:24:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Matcha_ice_cream/article/details/126005134
版权

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

JavaScript 基础知识点

一、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>BOM</title>
</head>
<script>
  console.log("navigator",navigator);
  console.log("window.navigator", window.navigator);
</script>
<body>
</body>
</html>

显示效果：

在这里插入图片描述

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>BOM</title>
</head>
<script>
  console.log("userAgent", navigator.userAgent);
</script>
<body>
</body>
</html>

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

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)

通过使用 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>BOM</title>
</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>

如果使用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>BOM</title>
</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>

注意：在判断是否属于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>location</title>
</head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      alert(location);
    }
  }
</script>
<body>
  <button id="btn">location按钮</button>
  <h1>location</h1>
</body>
</html>

显示效果：

在这里插入图片描述

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>location</title>
</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>location</h1>
</body>
</html>

展示效果：

在这里插入图片描述

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>location</title>
</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>location</h1>
</body>
</html>

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

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>location</title>
</head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      location.reload(); 
    }
  }
</script>
<body>
  <button id="btn">location按钮</button>
  <h1>location</h1>
  <input type="text">
</body>
</html>

显示效果：

在这里插入图片描述

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>location</title>
</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>location</h1>
</body>
</html>

显示效果：
在这里插入图片描述
注意：使用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>history</title>
</head>
<script type="text/javascript">
  alert(history.length);
</script>
<body>
  <h1>History</h1>
  <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>historypart</title>
</head>
<body>
  <h1>Historypart</h1>
  <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>historypart01</title>
</head>
<body>
  <h1>historypart01</h1> 
</body>
</html>

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

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>historypart01</title>
</head>
<script type="text/javascript">
  window.onload = function() {
    var btn = document.getElementById("button");
    btn.onclick = function() {
      history.back();
    }
  }
</script>
<body>
  <h1>historypart01</h1> 
  <button id="button">后退</button>
</body>
</html>

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

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>historypart</title>
</head>
<script>
  window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
      history.forward();
    }
  }
</script>
<body>
  <button id="btn">前进</button>
  <h1>Historypart</h1>
  <a href="historypart01.html">去historypart01界面</a> 
</body>
</html>

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

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>history</title>
</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>History</h1>
  <a href="historypart.html">去historypart页面</a>
</body>
</html>

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

5. Screen

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

6. 浏览器内核简介

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

浏览器渲染内核JS引擎
IE / EdgeTrident(<= IE10); EdgeHTMLJScript(<IE9); Chakra(IE9+及Edge)
ChromeChromium(Webkit); BlinkV8
FirefoxGeckoSpiderMonkey(< 3.0); TraceMonkey(< 3/6)；JaegerMonkey(4.0+)
SafariWebkit/Webkit2JSCore/Nitro(4+)
OperablinkFuthark(9.5-10.2); Carakan(10.5)
Matcha_ice_cream
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS-BOM基本概念
qq_39244173的博客
10-31 488
BOM （Browser Object Model）即浏览器对象模型 window对象-浏览器上打开的一个窗口 BOM_系统对话框 浏览器可以通过调用系统对话框，向用户展示信息。 系统提供了三个函数，可以完成系统对话框的操作。 【注】window下的函数，都可以省略window直接去调用。原本：window.alert(""); alert(""); 【功能】直接弹出警告框 【参数】警告框上...
[JavaScript] BOM知识点汇总
weixin_46076151的博客
03-23 389
文章目录一，BOM概述1.1，什么是BOM1.2BOM的构成二，window对象的常见事件2.1窗口加载事件2.2调整窗口大小事件三，定时器3.1两种定时器3.2停止定时器3.3this四，JS执行机制4.1JS是单线程4.2同步和异步4.4JS执行机制顺序五，location对象5.1什么是location5.2URL5.3location对象属性5.4 location方法六，history对象 一，BOM概述 1.1，什么是BOM BOM浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互
JavaScript基础知识之BOM
qq_38652677的博客
10-28 1767
BOM是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是windowBOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。BOM缺乏标准，javascript语法的标准化组织是ECMA,DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。DOM和BOM的比较DOM：文档对象模型、DOM就是把[文档]当作一个[对象]来看待、DOM的顶级对象是document、DOM主要学习的是操作页面元素、DOM是W3C标准规范。
javascript知识分享——BOM对象
DS153的博客
12-06 1047
前言 在学习完前面的DOM对象之后，我们知道，webAPI里面还有一个BOM对象没有学习。所以现在，就让我们来学习和了解BOM对象是什么，BOM对象有什么样的用法，我们通过BOM对象，可以去实现什么样的网页效果。 一、BOM对象 BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaS...
Web APIs笔记06——BOM- 操作浏览器
visionchyw的博客
07-25 193
Web APIs笔记06——BOM- 操作浏览器
JavaScript基础教程——入门必看篇
10-22
本文将深入探讨JavaScript的基础知识，帮助初学者快速入门。 首先，JavaScript是一种基于对象和事件驱动的描述性语言，这意味着它依赖于已有的对象来执行任务，并通过事件（如用户点击按钮）来触发代码执行。它也是...
Bom——获取url参数
zx2014567296的博客
07-28 498
获取url参数 知识点 location对象 含义：用于获取或设置窗体的URL，并解析URL URL protocal://host[:port]/path/[?query]#fragment http://www.itcast.cn/index.html?name=andy&age=18#link ①protocol：通信协议，常用的有http、ftp、maito ②host：主机（域名），www.baidu.com ③port：端口号（可选），省略时使用方案的默认端口，如http默认端口为8
JS:Javascript底层知识点
05-25
JavaScript，简称JS，是Web开发中的重要脚本语言，尤其在客户端编程中占据了核心地位。JavaScript的底层知识点涉及了变量、数据类型、作用域、内存管理、原型链、闭包、事件循环、异步编程等多个方面。以下是这些...
前端知识点总结——JavaScript基础
webqianduan1的博客
08-04 367
农历壬申年2019-08-11 17:56:54 前端知识点总结——JS基础 1.javascript概述(了解) 1.什么是javascript javascript简称为js，是一种运行于js解释器/引擎中的脚本语言 js的运行环境： 1.独立安装的js解释器（node） 2.嵌入在浏览器内核中的js解释器 2.js的发展史 1.1992年Nombas公司为自己开发了一款脚本语言SciptEase 2.1995年Netscape(网景)开发了一款脚本语言LiveScrpt,后来...
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1404
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
JS都有哪些操作数组的方法
ggq53219的博客
09-04 438
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 519
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 386
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
npm 安装electron网络问题报错解决
weixin_59685936的博客
09-05 946
npm 安装electron网络问题报错解决
前端框架有哪些 如何选择和优缺点
m0_50641264的博客
09-05 550
前端框架有哪些 如何选择和优缺点
滴滴前端日常实习一面
weixin_46714216的博客
08-31 581
滴滴前端面经
基于Java+Springboot+Vue+elememt宠物用品商城系统设计实现
央顺科技官方博客
08-31 1380
随着信息技术的不断发展，我们现在已经步入了信息化的时代了，而信息时代的代表便是网络技术的日渐成熟，而现在网络已经和我们的生活紧密的联系起来了，我们不敢想象没有网络我们的生活会像怎么样，也许就像食物中没有调料现在的生活离开了网络会变得索然无味。通过网络我们可以足不出户的做许多事情，例如工作、娱乐、学习，交友和购物等等许多我们数之不尽的事情，而就是因为网络我们的生活变得多姿多彩，或许有时甚至帮我们省下不少的时间和给予了我们更多的机遇。宠物网上商城对我们来说就有这些意义。
hiprint打印/jsPDF使用/html2canvas
最新发布
song854601134的博客
09-05 716
hiprint
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值