当前位置：首页 > article >正文

JavaScript【7】BOM模型

article 2025/9/22 3:02:31

1.概述：

BOM（Browser Object Model，浏览器对象模型）是 JavaScript 中的一个重要概念，它提供了一系列对象来访问和操作浏览器的功能和信息。

与 DOM（Document Object Model）主要关注文档结构不同，BOM 主要处理浏览器窗口以及相关的功能，如导航栏、地址栏、浏览器历史记录等。

可以把 BOM 看作是连接 JavaScript 和浏览器的桥梁，通过它可以控制浏览器的行为和获取浏览器相关的各种数据。

2.BOM的内置对象：

 *  Window 表示整个浏览器的窗口

```
 *  Navigator 表示浏览器的信息
```
```
 *  Location 浏览器的地址信息
```
```
 *  History 浏览器历史记录
```
```
 *  Screen 表示用户的屏幕信息
```

3.Window对象：获取窗口信息

1.浏览器添加弹窗：

     window.alert("警告弹窗");//确认弹窗let bool = window.confirm("确定吗？")console.log(bool)//提示弹窗let str = window.prompt("系统提示","我是默认值")console.log(str)

2.延时器：setTimeout

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>window.setTimeout(function () {console.log("执行了延时器")},1000) //1 秒后执行*/</script>
</body>
</html>

当页面加载完成后，延时1秒执行该函数；

3.定时器：setInterval

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>let timer = window.setInterval(function () {console.log("执行了定时器")},1000) // 间隔一秒后执行</script>
</body>
</html>

页面加载完成后，每隔一秒执行一次

4.取消延时器或定时器：

    //清除延时器window.clearTimeout()//清除定时器window.clearInterval(timer);

4. Navigator对象：获取浏览器信息

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//获取浏览器信息let ua = navigator.userAgent;console.log(ua)</script>
</body>
</html>

5. Location：获取地址栏信息：

1.获取地址栏信息：

  <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//获取地址栏信息// console.log(location)// console.log(location.href)//获取地址的全路径// console.log(location.origin)//获取地址的来源// console.log(location.hostname) //获取地址中的主机名// console.log(location.host)//获取主机// console.log(location.port)//获取端口部分// console.log(location.pathname)//获取当前的地址部分// console.log(location.search)// 获取地址的参数部分</script>
</body>
</html>

2.跳转到其他路径：

方式1：用’='直接赋值新路径

  <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//跳转 //修改的路径location = "https://www.baidu.com"</script>
</body>
</html>

方式2：href超链接：

   <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//跳转 //修改的路径location.href = "https://www.baidu.com"</script>
</body>
</html>

方式3：assign

   <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//跳转 //修改的路径location.assign("https://www.baidu.com")</script>
</body>
</html>

3.刷新页面：reload

   <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//跳转 //修改的路径location.reload(true)</script>
</body>
</html>

4.替换页面：replace

   <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>// 替换页面 不产生历史记录location.replace("https://www.baidu.com")</script>
</body>
</html>

6.History对象：获取浏览器历史记录

案例：通过历史记录对象的前进或后退实现页面跳转

创建3个页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>我是A页面</h1>
<a href="B.html">跳转到B页面</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>我是B页面</h1>
<a href="C.html">跳转到C页面</a>
<button onclick="forward()">点我前进</button><script>function forward() {//历史记录前进1步history.forward();//前进多步// history.go(3)}</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>我是C页面</h1>
<button onclick="back()">点我后退</button>
<script>//获取历史记录长度console.log(history.length)function back() {//后退1步history.back();//后退多步// history.go(-3)}</script>
</body>
</html>

点击A页面超链接时，跳转到B页面

点击B页面超链接时，跳转到C页面

点击C页面的后退按钮，历史记录后退一步到B页面(可后退多步)

当点击B页面前进按钮时，历史记录前进一步到C页面（可前进多步）；

JavaScript【7】BOM模型

1.概述： BOM（Browser Object Model，浏览器对象模型）是 JavaScript 中的一个重要概念，它提供了一系列对象来访问和操作浏览器的功能和信息。与 DOM（Document Object Model）主要关注文档结构不同&…...

编程日记 2025/9/10 15:35:58

[强化学习的数学原理—赵世钰老师]学习笔记02-贝尔曼方程

本人为强化学习小白，为了在后续科研的过程中能够较好的结合强化学习来做相关研究，特意买了西湖大学赵世钰老师撰写的《强化学习数学原理》中文版这本书，并结合赵老师的讲解视频来学习和更深刻的理解强化学习相关概念，知识和算法技…...

编程日记 2025/9/18 2:50:03

使用Spring Boot与Spring Security构建安全的RESTful API

使用Spring Boot与Spring Security构建安全的RESTful API 引言在现代Web应用开发中，安全性是不可忽视的重要环节。Spring Boot和Spring Security作为Java生态中的主流框架，为开发者提供了强大的工具来构建安全的RESTful API。本文将详细介绍如何结合S…...

编程日记 2025/8/4 3:20:25

深入理解构造函数,析构函数

目录 1.引言 2.构造函数 1.概念 2.特性 3.析构函数 1.概念 2.特性 1.引言如果一个类中什么都没有，叫作空类. class A {}; 那么我们这个类中真的是什么都没有吗?其实不是,如果我们类当中上面都不写.编译器会生成6个默认的成员函数。默认成员函数:用户没有显…...

编程日记 2025/9/19 12:13:01

目录 1.JZ79 判断是不是平衡二叉树1.1 解析1.2 代码 2.DP10 最大子矩阵2.1 解析2.2 代码 1.JZ79 判断是不是平衡二叉树 JZ79 判断是不是平衡二叉树 dfs 1.1 解析 1.2 代码 /*** struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* TreeNode(in…...

编程日记 2025/9/16 23:44:21

摄影构图小节

1、三分构图法三分构图法即将画面横竖各分为三份，即九宫格形式。将画面用两条竖线和两条横线分割，就如同是书写中文的【井】字。这样就可以得到4个交叉点，然后再将需要表现的重点放置在4个交叉点中的一个附近即可。拍摄自然风光时&#xf…...

编程日记 2025/9/10 15:35:58

DAY 28 类的定义和方法

知识点回顾： 类的定义pass占位语句类的初始化方法类的普通方法类的继承：属性的继承、方法的继承比如def、class这些定义的关键词后，必须有一个有占据缩进位置的代码块。还有下面这些依赖缩进的语句，都可以用pass语句来占位 x 1…...

编程日记 2025/9/17 20:49:51

RAG数据处理：PDF/HTML

RAG而言用户输入的数据通常是各种各样文档，本文主要采用langchain实现PDF/HTML文档的处理方法 PDF文档解析 PDF文档很常见格式，但内部结构常常较复杂： 复杂的版式布局多样的元素（段落、表格、公式、图片等）文本流无…...

编程日记 2025/9/18 10:01:02

机器学习 day04

文章目录前言一、线性回归的基本概念二、损失函数三、最小二乘法前言通过今天的学习，我掌握了机器学习中的线性回归的相关基本概念，包括损失函数的概念，最小二乘法的理论与算法实现。一、线性回归的基本概念要理解什么是线性回归&…...

编程日记 2025/9/18 17:34:22

蓝牙耳机什么牌子好？倍思值得冲不？

最近总被问“蓝牙耳机什么牌子好”，作为踩过无数坑的资深耳机党，必须安利刚入手的倍思M2s Pro主动降噪蓝牙耳机！降噪、音质、颜值全都在线，性价比直接拉满。 -52dB降噪，通勤摸鱼神器第一次开降噪就被惊到&#xff01…...

编程日记 2025/9/10 17:36:29

机器学习-人与机器生数据的区分模型测试-数据处理 - 续

这里继续机器学习-人与机器生数据的区分模型测试-数据处理1的内容查看数据中1的情况 #查看数据1的分布情况 one_ratio_list [] for col in data.columns:if col city or col target or col city2: # 跳过第一列continueelse:one_ratio data[col].mean() # 计算1值占…...

编程日记 2025/9/10 17:36:30

ESP系列单片机选择指南：结合实际场景的最优选择方案

前言在物联网(IoT)快速发展的今天，ESP系列单片机凭借其优异的无线连接能力和丰富的功能特性，已成为智能家居、智慧农业、工业自动化等领域的首选方案。本文将深入分析各款ESP芯片的特点，结合典型应用场景，帮助开发者做出最优选择…...

编程日记 2025/9/14 2:16:25

特斯拉虚拟电厂：能源互联网时代的分布式革命

在双碳目标与能源转型的双重驱动下，特斯拉虚拟电厂（Virtual Power Plant, VPP）通过数字孪生技术与能源系统的深度融合，重构了传统电力系统的运行范式。本文从系统架构、工程实践、技术挑战三个维度，深度解析这一颠覆性…...

编程日记 2025/9/10 17:36:30

jvm安全点(三)openjdk17 c++源码垃圾回收之安全点结束，唤醒线程

1. VMThread::inner_execute() - 触发安全点 cpp 复制 void VMThread::inner_execute(VM_Operation* op) { if (op->evaluate_at_safepoint()) { SafepointSynchronize::begin(); // 进入安全点，阻塞所有线程 // ...执行GC等操作... SafepointSynchronize::…...

编程日记 2025/9/18 17:39:40

Python OOP核心技巧：如何正确选择实例方法、类方法和静态方法

Python方法类型全解析：实例方法、类方法与静态方法的使用场景一、三种方法的基本区别二、访问能力对比表三、何时使用实例方法使用实例方法的核心场景：具体应用场景：1. 操作实例属性2. 对象间交互3. 实现特定实例的行为四、何时使用类方法使…...

编程日记 2025/7/11 14:20:58

【Linux笔记】nfs网络文件系统与autofs（nfsdata、autofs、autofs.conf、auto.master）

一、nfs概念 NFS（Network File System，网络文件系统） 是一种由 Sun Microsystems 于1984年开发的分布式文件系统协议，允许用户通过网络访问远程计算机上的文件，就像访问本地文件一样。它广泛应用于 Unix/Linux 系统&a…...

编程日记 2025/9/10 17:36:30

博客打卡-求解流水线调度

题目如下： 有n个作业（编号为1～n）要在由两台机器M1和M2组成的流水线上完成加工。每个作业加工的顺序都是先在M1上加工，然后在M2上加工。M1和M2加工作业i所需的时间分别为ai和bi（1≤i≤n）。流水…...

编程日记 2025/9/18 13:35:59

基于React的高德地图api教程006：两点之间距离测量

文章目录 6、距离测量6.1 两点之间距离测量6.1.1 两点距离测量按钮6.1.2 点击地图添加点6.1.3 测量两点之间距离并画线6.2 测量过程显示两点之间预览线6.3 绘制完毕6.4 显示清除按钮6.5 代码下载6.06、距离测量 6.1 两点之间距离测量 6.1.1 两点距离测量按钮实现代码： re…...

编程日记 2025/6/1 18:43:43

数据库blog1_信息（数据）的处理与效率提升

🌿信息的处理 🍂实际中离不开信息处理 ● 解决问题的建模任何对问题的处理都可以看作数据的输入、处理、输出。 eg.一个项目中，用户点击信息由前端接收传递到后端处理后返回结果eg.面对一个问题，我们在搜集信息后做出处理与分析…...

编程日记 2025/9/10 17:58:00

布隆过滤器介绍及其在大数据场景的应用

目录布隆过滤器（Bloom Filter）介绍一、布隆过滤器的基本原理插入元素过程：查询元素过程： 二、布隆过滤器的特点三、误判率计算四、举例说明五、总结 Python版的简单布隆过滤器实现示例一、简单布隆过滤器Python示例二、布隆过滤器…...

编程日记 2025/9/21 13:37:48

Ansys 计算刚柔耦合矩阵系数

Ansys 计算刚柔耦合系数矩阵文章目录 Ansys 计算刚柔耦合系数矩阵卫星的刚柔耦合动力学模型采用 ANSYS 的 APDL 语言的计算方法系统转动惯量的求解方法参考文献卫星的刚柔耦合动力学模型柔性航天器的刚柔耦合动力学模型可以表示为 m v ˙ B t r a n η F J ω ˙ ω J…...

编程日记 2025/9/19 17:11:25

微服务八股（自用）

微服务 SpringCloud 注册中心：Eureka 负载均衡：Ribbon 远程调用：Feign 服务熔断：Hystrix 网关：Gateway/Zuul Alibaba 配置中心：Nacos 负载均衡：Ribbon 服务调用：Feign 服务…...

编程日记 2025/8/28 17:03:02

指定elf文件dwarf 版本以及查看dwarf版本号

背景： 在实际项目开发过程中，为了让低版本的CANape 工具识别elf 文件，需要在编译elf文件时，指定dwarf的版本。使用方法： 需要再CMakeLists.txt中指定dwarf 版本 add_compile_options(-g -gdwarf-2) #-gdwarf-4 验…...

编程日记 2025/8/10 20:31:32

Fidder基本操作

1.抓取https请求 Fidder默认不能抓取https请求，我们必须通过相应的设置才能抓取https请求 1.选择tools下的option 2.选择https选项，并且勾选下面的选项 3.点击Actions导出信任证书到桌面(expert root certificate to desktop) 4.在浏览器中添加对应的证…...

编程日记 2025/9/10 19:36:23

项目管理进阶：精读 78页华为项目管理高级培训教材【附全文阅读】

本文概述了华为项目管理（高级）课程的学习目标及学习方法。学习该课程后，学员应能： 1. **深刻理解项目管理**：掌握项目管理的基本概念与方法，构建项目管理思维框架。 2. **应用IBEST理念**：结合I…...

编程日记 2025/9/15 22:41:39

[Java] 方法和数组

目录 1. 方法 1.2 什么是方法 1.2 方法的定义 1.3 方法的调用 1.4 方法的重载 1.5 递归 2. 一维数组 2.1 什么是数组 2.2 数组的创建 2.3 数组的初始化 2.4 遍历数组 2.5 引用数据类型 2.6 关于null 2.7 数组转字符串 2.8 数组元素的查找 2.9 数组的排序 2.10…...

编程日记 2025/9/14 21:35:35

微软家各种copilot的AI产品：Github copilot、Microsoft copilot

背景大家可能听到很多copilot，比如 Github Copilot，Microsoft Copilot、Microsoft 365 Copilot，有什么区别 Github Copilot：有网页版、有插件（idea、vscode等的插件），都是面向于程序员的。Mi…...

编程日记 2025/9/10 19:38:05

KL散度 (Kullback-Leibler Divergence)

KL散度，也称为相对熵 (Relative Entropy)，是信息论中一个核心概念，用于衡量两个概率分布之间的差异。给定两个概率分布 P ( x ) P(x) P(x) 和 Q ( x ) Q(x) Q(x)（对于离散随机变量）或 p ( x ) p(x) p(x) 和 q ( x …...

编程日记 2025/7/11 18:57:04

深入解析：java.sql.SQLException: No operations allowed after statement closed 报错

在 Java 应用程序开发过程中，尤其是涉及数据库交互时，开发者常常会遇到各种各样的异常。其中，java.sql.SQLException: No operations allowed after statement closed是一个较为常见且容易令人困惑的错误。本文将深入剖析这一报错&#xff0c…...

编程日记 2025/6/30 22:31:19

DAY 23 训练

DAY 23 训练 DAY23 机器学习管道 pipeline基础概念转换器（Transformer）估计器（Estimator） 管道（Pipeline）代码演示没有 pipeline 的代码pipeline 的代码教学导入库和数据加载分离特征和标签，划分…...

编程日记 2025/6/22 10:06:39

1.概述：

2.BOM的内置对象：

3.Window对象：获取窗口信息

1.浏览器添加弹窗：

2.延时器：setTimeout

3.定时器：setInterval

4.取消延时器或定时器：

4. Navigator对象：获取浏览器信息

5. Location：获取地址栏信息：

1.获取地址栏信息：

2.跳转到其他路径：

方式1：用’='直接赋值新路径

方式2：href超链接：

方式3：assign

3.刷新页面：reload

4.替换页面：replace

6.History对象：获取浏览器历史记录

案例：通过历史记录对象的前进或后退实现页面跳转

相关文章：