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

JavaScript【7】BOM模型

news 来源：原创 2025/6/8 15:10:20

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/5/29 12:14:20

STM32F10xx 参考手册

6. 什么是寄存器本章参考资料：《STM32F10xx 参考手册》、《STM32F10xx数据手册》、学习本章时，配合《STM32F10xx 参考手册》“存储器和总线架构”及“通用I/O(GPIO)”章节一起阅读，效果会更佳，特别是涉及到寄存器说明的部分。…...

编程日记 2025/5/29 10:16:22

本节我们学习使用instance着色器进行着色 //拾取var handler new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(function(movement){console.log(movement);var pickedObject viewer.scene.pick(movement.position);if(Cesium.defined(picke…...

编程日记 2025/5/26 14:50:49

MySQL——4、表的约束

表的约束 1、空属性2、默认值3、列描述4、zerofill5、主键6、自增长7、唯一键8、外键9、综合案例真正约束字段的是数据类型，但是数据类型约束很单一，需要有一些额外的约束，更好的保证数据的合法性，从业务逻辑角度保证数据的正确性…...

编程日记 2025/5/18 11:51:50

Datawhale PyPOTS时间序列5月第3次笔记

下游任务的两阶段(two-stage) 处理下载数据并预处理的程序： # ------------------------------- # 导入必要的库 # ------------------------------- import numpy as np import torch from benchpots.datasets import preprocess_physionet2012 from pypots.imp…...

编程日记 2025/5/29 20:33:01

初探Reforcement Learning强化学习【QLearning/Sarsa/DQN】

文章目录一、Q-learning现实理解：举例：回顾： 二、Sarsa和Q-learning的区别三、Deep Q-NetworkDeep Q-Network是如何工作的？前处理：Convolution NetworksExperience Replay 一、Q-learning 是RL中model-free、value-…...

编程日记 2025/6/2 19:27:29

计算机图形学编程(使用OpenGL和C++)(第2版)学习笔记 12.曲面细分

1. 曲面细分曲面细分着色器（Tessellation Shader）是OpenGL 4.0及以上版本引入的一种可编程着色器阶段，用于在GPU上对几何体进行细分，将粗糙的多边形网格自动细分为更平滑、更精细的曲面。它主要用于实现高质量的曲面渲染&#x…...

编程日记 2025/5/29 18:30:14

8天Python从入门到精通【itheima】-14~16

目录第二章学习内容总体预览： 14节-字面量： 1.学习目标：编辑 2.Python中6大常用数据类型： 3.实现：整数、浮点数、字符串类型的数据输出 4.字面量的定义： 5.小节总结 15节-注释： 1.le…...

编程日记 2025/5/29 10:54:01

Spring Boot 项目的计算机专业论文参考文献

技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

编程日记 2025/5/27 6:31:45

linux线程基础

1. 什么是线程进程是承担系统资源分配的基本实体，而线程（Thread）是进程内的一个执行单元，是CPU调度的基本单位。一个进程可以包含多个线程，这些线程共享进程的地址空间和资源（如文件描述符、全局变量等&a…...

编程日记 2025/5/27 6:37:40

进阶-数据结构部分：3、常用查找算法

飞书文档https://x509p6c8to.feishu.cn/wiki/LRdnwfhNgihKeXka7DfcGuRPnZt 顺序查找查找算法是指：从一些数据之中，找到一个特殊的数据的实现方法。查找算法与遍历有极高的相似性，唯一的不同就是查找算法可能并不一定会将每一个数据都进行访…...

编程日记 2025/5/29 12:37:31

JavaScript 中的 for...in 和 for...of 循环详解

在 JavaScript 中，for...in 和 for...of 是两种常用的循环结构，但它们有着不同的用途和行为。很多初学者容易混淆这两者，本文将详细解析它们的区别、适用场景以及注意事项。目录 for…in 循环基本用法遍历对象属性注意事项 for…of 循环 …...

编程日记 2025/5/22 9:59:33

【汇总】影视仓接口地址,影视仓最新配置接口【2025.5】

📦 TVBOX接口分类与制作加载指南结合参考资料，整理TVBOX接口的核心分类、制作方法及加载技巧，助你快速上手！ 🌐 一、接口分类 🌍 网络接口（远程URL） 特点：动态加载在线J…...

编程日记 2025/6/1 8:10:57

vue引用cesium，解决“Not allowed to load local resource”报错

vue引用cesium，解决“Not allowed to load local resource”报错TOC 工具 vscode node ：v22.14.0npm ：10.9.2vue：vue/cli 5.0.8 一、创建一个 Vue 3 项目 1.创建名为cesium_test的项目： vue create cesium_test2.…...

编程日记 2025/5/27 6:15:13

阿里云服务器跑模型教程

首先打开阿里云官网点击免费试用选择250工时/月的免费仨月新人试用套餐点击右上角主账号选择人工智能平台PAI 然后选择交互式建模(DSW) 选择新建实例起个名字然后点击确定点击打开进入到命令行工具下载MINIConda和对应的pytorch还有相关依赖库文件即可然后上传…...

编程日记 2025/5/29 11:45:49

JavaScript入门【2】语法基础

1.JavaScript的引⼊⽅式(使用): 1.方式1:行内引用: 此种方式是将<font style"color:rgb(38,38,38);">JavaScript代码作为HTML标签的属性值使⽤,示例如下:</font><html lang"en"> <head><meta charset"UTF-8"><…...

编程日记 2025/5/31 9:21:49

调用DeepSeek系列模型问答时，输出只有＜/think＞标签，而没有＜think＞标签

问题：调用DeepSeek系列模型问答时，输出结果缺少只有标签，而没有标签？ DeepSeek官方有关说明这里设置成这样是为了保证让模型的生成是以"<think>\n"开头的，然后开始思考过程，避免模型没…...

编程日记 2025/5/25 21:47:38

python：gimp 与 blender 两个软件如何协作？

GIMP（GNU Image Manipulation Program）和 Blender 是两个不同领域的开源工具，但它们在数字创作流程中常协同使用，以下是它们的主要联系和互补性： 1. 功能互补：2D 与 3D 的结合 GIMP 是专业的 2D 图像处理工…...

编程日记 2025/5/21 11:45:02

MMDetection环境安装配置

MMDetection 支持在 Linux，Windows 和 macOS 上运行。它需要 Python 3.7 以上，CUDA 9.2 以上和 PyTorch 1.8 及其以上。 MMDetection 至今也一直更新很多个版本了，但是对于最新的pytorch版本仍然不支持，我安装的时候仍然多次遇到m…...

编程日记 2025/5/29 12:34:02

【springboot+vue3的前后端分离项目实现支付宝的沙箱支付】

【springbootvue3的前后端分离项目实现支付宝的沙箱支付】以下是基于SpringBoot Vue前后端分离项目实现支付宝沙箱支付的完整解决方案，包含关键代码和调试技巧一、项目架构设计二、后端实现（SpringBoot） 1. 添加依赖 <!-- pom.xml…...

编程日记 2025/5/31 6:36:02

基于Llama3的开发应用（二）：大语言模型的工业部署

大语言模型的工业部署 0 前言1 ollama部署大模型1.1 ollama简介1.2 ollama的安装1.3 启动ollama服务1.4 下载模型1.5 通过API调用模型 2 vllm部署大模型2.1 vllm简介2.2 vllm的安装2.3 启动vllm模型服务2.4 API调用 3 LMDeploy部署大模型3.1 LMDeploy简介3.2 LMDeploy的安装3.3…...

编程日记 2025/6/2 15:22:15

MySQL只操作同一条记录也会死锁吗?

大家好，我是锋哥。今天分享关于【MySQL只操作同一条记录也会死锁吗?】面试题。希望对大家有帮助； MySQL里where条件的顺序影响索引使用吗？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网在MySQL中，死锁通常发生在多…...

编程日记 2025/5/29 11:12:16

Linux的静态库共享库进程主函数的参数

1、库文件库文件库是一组预先编译好的方法的集合； Linux系统储存的位置一般在/lib和/usr/lib中库的头文件放在/usr/include 库分类：静态库（libxxx.a）共享库（libxxx.so） 静态库 （1&#…...

编程日记 2025/5/21 14:30:56

软件设计师考试结构型设计模式考点全解析

结构型设计模式考点全解析一、分值占比与考察趋势分析（75分制） 设计模式近5年平均分值考察频率趋势分析适配器模式3-5分高频保持稳定桥接模式2-3分中频略有上升组合模式4-6分高频持续重点装饰器模式3-4分高频稳定考察代理模式5-7分高频逐年增加外观模…...

编程日记 2025/5/28 16:39:22

Java-Objects类高效应用的全面指南

Java_Objects类高效应用的全面指南前言一、Objects 类概述二、Objects 类的核心方法解析2.1 requireNonNull系列方法：空指针检查的利器2.2 equals方法：安全的对象比较2.3 hashCode方法：统一的哈希值生成2.4 toString方法：灵活的对…...

编程日记 2025/5/27 7:46:19

PostGIS实现栅格数据入库-raster2pgsql

raster2pgsql使用与最佳实践一、工具概述 raster2pgsql是PostGIS提供的命令行工具，用于将GDAL支持的栅格格式（如GeoTIFF、JPEG、PNG等）导入PostgreSQL数据库，支持批量加载、分块切片、创建空间索引及金字塔概览，是栅格数据入库的核心工具。二、核心功能与典型用法 1…...

编程日记 2025/5/31 8:49:02

专题四：综合练习（组合问题的决策树与回溯算法）

以leetode77题为例题目分析： 给一个数字n，你可以在1到n中选k个数字进行组合，注意包括1和n，而且通过观察实例 1，2和2，1是一样的，所以我们画决策树的时候，只需要从当前位置往后列举…...

编程日记 2025/5/29 11:19:31

从神经架构到万物自动化的 AI 革命：解码深度学习驱动的智能自动化新范式

目录一、深度学习与 AI 自动化概述二、深度学习核心技术解析 2.1 常见深度学习架构 2.2 关键算法三、AI 自动化实践案例 3.1 图像分类自动化 3.2 自然语言处理自动化 —— 文本情感分析编辑五、自动化系统设计与实现 5.1 端到端自动化框架 5.2 自动化测试框架…...

编程日记 2025/5/30 19:42:48

3.5/Q1，GBD数据库最新文章解读

文章题目：Burden, trends, projections, and spatial patterns of lip and oral cavity cancer in Iran: a time-series analysis from 1990 to 2040 DOI：10.1186/s12889-025-22202-8 中文标题：伊朗唇癌和口腔癌的负担、趋势、预测和空间模式…...

编程日记 2025/5/29 17:55:49

智慧校园（含实验室）智能化专项汇报方案

该方案聚焦智慧校园（含实验室）智能化建设，针对传统实验室在运营监管、环境监测、安全管控、排课考勤等方面的问题，依据《智慧校园总体框架》等标准，设计数字孪生平台、实验室综合管理平台、消安电一体化平台三大核心平台，涵盖通信、安防、建筑设备管理等设施，涉及 395 个…...

编程日记 2025/5/27 6:52:30

玩转 AI · 思考过程可视化

玩转 AI 思考过程可视化我们在开发 AI 的思维链 / 处理流时，难免遇到耗时较长的流程，如果遇到处理过慢的，用户什么也看不到可能丧失使用兴趣，对于这种情况，一个巧妙的产品思维就是呈现处理进度。示例其实完成这个页…...

编程日记 2025/5/29 12:20:02

hysAnalyser 从MPEG-TS导出ES功能说明

摘要 hysAnalyser 是一款特色的 MPEG-TS 数据分析工具。本文主要介绍了 hysAnalyser 从MPEG-TS 中导出选定的 ES 或 PES 功能(版本v1.0.003)，以便用户知悉和掌握这些功能，帮助分析和解决各种遇到ES或PES相关的实际问题。hysAnalyser 支持主流的MP1/MP2/…...

编程日记 2025/5/29 12:16:02

[YOLO模型]（4）YOLO V3的介绍

文章目录 YOLO V3一、模型思想二、模型性能三、改进的地方1. 三种scale2. scale变换经典方法3. 残差连接4. 核心网络架构(1) 结构(2) 输出与先验框关系 5. Logistic分类器替代Softmax 四、总结 YOLO V3 一、模型思想作者 Redmon 又在 YOLOv2 的基础上做了一些改进&#xff1a…...

编程日记 2025/5/26 7:38:12

期望是什么：（无数次的均值，结合概率）21/6=3.5

https://seeing-theory.brown.edu/basic-probability/cn.html 期望是什么：（无数次的均值，结合概率）21/6=3.5 一、期望（数学概念）在概率论和统计学中，**期望（Expectation）**是一个核心概念，用于描述随机变量的长期平均取值，反映随机变量取值的集中趋势。（一…...

编程日记 2025/5/22 8:12:06

Stacking（堆叠）：集成学习中的“超级英雄团队”

在机器学习的世界里，如果要找一个类似漫威“复仇者联盟”的存在，那么**Stacking（堆叠）**无疑是最佳候选人。就像钢铁侠、美国队长和雷神各自拥有独特的能力，但只有当他们组队时才能发挥出惊人的战斗力，Stac…...

编程日记 2025/6/3 15:35:21

手写tomcat：基本功能实现（3）

TomcatRoute类 TomcatRoute类是Servlet容器，是Tomcat中最核心的部分，其本身是一个HashMap，其功能为：将路径和对象写入Servlet容器中。 package com.qcby.config;import com.qcby.Util.SearchClassUtil; import com.qcby.servlet…...

编程日记 2025/5/30 12:01:48

nt!MiRemovePageByColor函数分析之脱链和刷新颜色表

第0部分：背景 PFN_NUMBER FASTCALL MiRemoveZeroPage ( IN ULONG Color ) { ASSERT (Color < MmSecondaryColors); Page FreePagesByColor[Color].Flink; if (Page ! MM_EMPTY_LIST) { // // Remove the first entry on the zeroe…...

编程日记 2025/5/23 17:58:46

时间筛掉了不够坚定的东西

2025年5月17日，16~25℃，还好待办： 《高等数学1》重修考试《高等数学2》备课《物理[2]》备课《高等数学2》取消考试资格学生名单《物理[2]》取消考试资格名单职称申报材料 2024年税务申报 5月24日、25日监考报名遇见：敲了一…...

编程日记 2025/5/22 0:21:28

3D个人简历网站 4.小岛

1.模型素材在Sketchfab上下载狐狸岛模型，然后转换为素材资源asset，嫌麻烦直接在网盘链接下载素材， Fox’s islandshttps://sketchfab.com/3d-models/foxs-islands-163b68e09fcc47618450150be7785907https://gltf.pmnd.rs/ 素材夸克网盘&a…...

编程日记 2025/5/18 11:24:23

第十一课蜗牛爬树

上次作业同学们课后可以尝试找一下30以内，哪个整数有最多的因数呢？ 这个整数有多少个因数呢？ 最好使用程序来进行判断哦 int main() {int max_num 1; // 记录因数最多的数int max_count 1; // 记录最大因数个数for (int num 2; num <…...

编程日记 2025/6/2 0:24:23

字体样式集合

根据您提供的字体样式列表，以下是分类整理后的完整字体样式名称（不含数量统计）： 基础样式 • Regular • Normal • Plain • Medium • Bold • Black • Light • Thin • Heavy • Ultra • Extra • Semi • Hai…...

编程日记 2025/5/28 0:22:55

Spring MVC 如何处理文件上传？需要哪些配置和依赖？如何在 Controller 中接收上传的文件 (MultipartFile)？

Spring MVC 处理文件上传主要依赖于 MultipartResolver 接口及其实现。最常用的实现是 CommonsMultipartResolver（基于 Apache Commons FileUpload）和 StandardServletMultipartResolver（基于 Servlet 3.0 API）。以下是如何配置…...

编程日记 2025/5/22 17:18:21

探索C++对象模型：（拷贝构造、运算符重载）成员函数的深度解读（中篇）

前引：在C的面向对象编程中，对象模型是理解语言行为的核心。无论是类的成员函数如何访问数据，还是资源管理如何自动化，其底层机制均围绕两个关键概念展开：拷贝复制、取地址重载成员函数。它们如同对象的“隐形守护者”&…...

编程日记 2025/5/29 17:14:09

[逆向工程]C++实现DLL注入：原理、实现与防御全解析（二十五）

[逆向工程]C实现DLL注入：原理、实现与防御全解析（二十五） 引言 DLL注入（DLL Injection）是Windows系统下实现进程间通信、功能扩展、监控调试的核心技术之一。本文将从原理分析、代码实现、实战调试到防御方案&#x…...

编程日记 2025/5/31 19:07:14

gcc/g++常用参数

1.介绍 gcc用于编译c语言，g用于编译c 源代码生成可执行文件过程，预处理-编译-汇编-链接。https://zhuanlan.zhihu.com/p/476697014 2.常用参数说明 2.1编译过程控制参数作用-oOutput，指定输出名字-cCompile，编译源文件生成对…...

编程日记 2025/5/27 17:34:45

51单片机课设基于GM65模块的二维码加条形码识别

系统组成主控单元：51单片机（如STC89C52）作为核心控制器，协调各模块工作。扫描模块：GM65条码扫描头，支持二维码/条形码识别，通过串口（UART）与单片机通信。显示模块&a…...

编程日记 2025/5/27 6:11:55

物联网赋能7×24H无人值守共享自习室系统设计与实践！

随着"全民学习"浪潮的兴起，共享自习室市场也欣欣向荣，今天就带大家了解下在物联网的加持下，无人共享自习室系统的设计与实际方法。一、物联网系统整体架构 1.1 系统分层设计层级技术组成核心功能用户端微信小程序/H5预约选座、…...

编程日记 2025/5/28 14:35:08

基于多头自注意力机制(MHSA)增强的YOLOv11主干网络—面向高精度目标检测的结构创新与性能优化

深度学习在计算机视觉领域的快速发展推动了目标检测算法的持续进步。作为实时检测框架的典型代表，YOLO系列凭借其高效性与准确性备受关注。本文提出一种基于多头自注意力机制(Multi-Head Self-Attention, MHSA)增强的YOLOv11主干网络结构，旨在提升模型在…...

编程日记 2025/5/29 13:52:44

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

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

编程日记 2025/5/26 16:16:34

小刚说C语言刷题—1230蝴蝶结

1.题目描述请输出 n 行的蝴蝶结的形状，n 一定是一个奇数！ 输入一个整数 n ，代表图形的行数！ 输出 n 行的图形。样例输入 9 输出 ***** **** *** ** * ** *** **** ***** 2.参考代码（C语言版&#xff09…...

编程日记 2025/6/4 3:44:57