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

WEB前端06-BOM对象

news 2025/9/16 0:43:39
BOM浏览器对象模型

浏览器对象模型：将浏览器的各个组成部分封装成对象。是用于描述浏览器中对象与对象之间层次关系的模型，提供了独立于页面内容、并能够与浏览器窗口进行交互的对象结构。

  • 组成部分
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
  • Window窗口对象

window对象是一个全局对象，因此可以直接使用全局对象的属性和方法，而无须写出全局对象的对象名。 window对象在某种意义上代表了浏览器本身，它包含了大量关于浏览器的属性

* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。  方法名();

1.常用属性

image-20231230202631998

1. 获取其他BOM对象: history,location,Navigator,Screen
2. 获取DOM对象: document

2.常用方法

image-20231230202645286

3.常用方法详解

对话框方法

对话框是跟用户进行交流的一种形式，对话框有提示、选择 和获取信息的功能。JavaScript提供了三种标准的对话框，分别是弹出对话框、选择对话框和输入对话框。

方法描述
alert()弹出一个只包含确定的对话框
confirm()弹出一个包含【确定】和【取消】按钮的对话框，如果单击 【确定】，则返回true，如果单击【取消】，则返回false
prompt()弹出一个包含【确定】按钮、【取消】按钮和一个文本框的对话框，可以接收用户输入的信息。如果单击【确定】，则 返回文本框已有内容，如果单击【取消】，则返回null

窗口打开与关闭方法

方法描述
open()打开一个新window对象； open(“URL”)表示要指定打开的窗口； open()方法会返回一个表示新窗口的window对象
close()关闭调用close方法的window窗口对象

定时器方法

setInterval-----周期性的执行某一个函数

let id = setInterval(方法对象, 毫秒值)
//会返回定时器的id值

setTimeout-----延迟时间执行一次函数

let id = setTimeout(方法对象, 毫秒值)
//会返回定时器的id值

clearInterval()-----取消由 setInterval() 设置的 timeout

clearInterval(id);

clearTimeout()-----取消由 setTimeout() 方法设置的 timeout。

clearTimeout(id);

案例：轮播图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title>
</head><body><img src="image/banner_1.jpg" id="banner" width="100%"><script>let num = 1;setInterval(change, 3000);function change() {num++;if (num === 4) {num = 1;}let str = "image/banner_" + num + ".jpg";document.getElementById("banner").src = str;}</script>
</body></html>
  • Location地址栏对象

常用方法

location.reload();//重新加载当前文档,刷新页面

常用属性

获取地址
location.href
//作用：跳转地址
location.href=“www.baidu.com”

案例：自动跳转

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跳转首页</title><style>p {text-align: center;font-size: 30px;}.time {color: red;}</style>
</head>
<body><p><span class="time" id="time">5</span>秒后自动跳转首页</p><script>let count = 5;let t = document.getElementById("time");setInterval(change, 1000);function change() {count--;t.innerHTML = count;if (count == 1) {location.href = "https://www.baidu.com";}}</script>
</body>
</html>
  • History：历史记录对象

history对象只是表示在当前页面下访问了几个窗体，并不是指浏览器的历史记录

常用方法：

* back()	 加载 history 列表中的前一个 URL。
* forward()	 加载 history 列表中的下一个 URL。
* go(参数)    加载 history 列表中的某个具体页面。
正数：前进几个历史记录
负数：后退几个历史记录

常用属性：

length	返回当前窗口历史列表中的 URL 数量。

相关文章：

WEB前端06-BOM对象

BOM浏览器对象模型 浏览器对象模型&#xff1a;将浏览器的各个组成部分封装成对象。是用于描述浏览器中对象与对象之间层次关系的模型&#xff0c;提供了独立于页面内容、并能够与浏览器窗口进行交互的对象结构。 组成部分 Window&#xff1a;浏览器窗口对象 Navigator&…...

编程日记 2024/7/22 21:25:22

Android11 framework 禁止三方应用开机自启动

Android11应用自启动限制 大纲 Android11应用自启动限制分析验证猜想&#xff1a;Android11 AOSP是否自带禁止三方应用监听BOOT_COMPLETED​方案禁止执行非系统应用监听到BOOT_COMPLETED​后的代码逻辑在执行启动时判断其启动的广播接收器一棍子打死方案&#xff08;慎用&#…...

编程日记 2024/7/22 21:22:17

Java | Leetcode Java题解之第263题丑数

题目&#xff1a; 题解&#xff1a; class Solution {public boolean isUgly(int n) {if (n < 0) {return false;}int[] factors {2, 3, 5};for (int factor : factors) {while (n % factor 0) {n / factor;}}return n 1;} }...

编程日记 2024/7/22 21:20:15

将AWS RDS MySQL实例从存储未加密改为加密的方案

问题描述&#xff1a; 因为AWS RDS官方文档【1】中已经明确说明&#xff0c;MySQL RDS的存储为EBS卷&#xff0c;用KMS进行RDS加密有如下限制&#xff1a; 您只能在创建RDS的时候&#xff0c;选择加密。对于已经创建的RDS实例&#xff0c;您无法将为加密的实例&#xff0c;直…...

编程日记 2024/7/22 21:18:12

nginx的配置：TLSv1 TLSv1.1 被暴露不安全

要在 Nginx 配置中禁用不安全的 SSL 协议&#xff08;如 TLSv1 和 TLSv1.1&#xff09;&#xff0c;并仅启用更安全的协议&#xff08;如 TLSv1.2 和 TLSv1.3&#xff09;&#xff0c;您可以更新您的 Nginx 配置文件。下面是一个示例配置&#xff1a; # 位于 Nginx 配置文件 (…...

编程日记 2024/7/22 21:09:04

揭开黑箱：目标检测中可解释性的重要性与实现

揭开黑箱&#xff1a;目标检测中可解释性的重要性与实现 在深度学习的目标检测任务中&#xff0c;模型的准确性虽然重要&#xff0c;但模型的决策过程是否透明也同样关键。可解释性&#xff08;Explainability&#xff09;是指模型能够为其预测结果提供清晰、可理解的解释。本…...

编程日记 2024/7/22 21:08:03

Mysql高价语句

一.高级语法的查询语句 1.排序语法&#xff08;默认的排序方式就是升序&#xff09;。 升序ASC&#xff1a;select * from test01 order by name; 降序DESC&#xff1a;select * from test01 order by name desc; 多个列排序&#xff1a;以多个列作为排序&#xff0c;只有第一…...

编程日记 2024/7/22 21:07:02

ArcGIS Pro SDK （九）几何 6 包络

ArcGIS Pro SDK &#xff08;九&#xff09;几何 6 包络 文章目录 ArcGIS Pro SDK &#xff08;九&#xff09;几何 6 包络1 构造包络2 构造包络 - 从 JSON 字符串3 合并两个包络4 与两个包络相交5 展开包络6 更新包络的坐标 环境&#xff1a;Visual Studio 2022 .NET6 ArcGI…...

编程日记 2024/7/22 21:06:00

单链表＜数据结构 C版＞

目录 概念 链表的单个结点 链表的打印操作 新结点的申请 尾部插入 头部插入 尾部删除 头部删除 查找 在指定位置之前插入数据 在任意位置之后插入数据 测试运行一下&#xff1a; 删除pos结点 删除pos之后结点 销毁链表 概念 单链表是一种在物理存储结构上非连续、非顺序…...

编程日记 2024/7/22 21:03:58

监控电脑进程，避免程序在打开前就已经在运行

文章目录 一、文章的目的&#xff08;适用于windows&#xff09;二、处理方式三、进程查看的内容在窗口端的演示四、附上代码例子四、通过os.kill的方式&#xff0c;再回到原来的表格时&#xff0c;会出现如下错误提示&#xff1a; 一、文章的目的&#xff08;适用于windows&am…...

编程日记 2024/7/22 21:01:57

【MySQL进阶篇】存储对象：视图、存储过程及触发器

一、视图 1、介绍 视图&#xff08;view&#xff09;是一种虚拟存在的表。视图中的数据并不在数据库中实际存在&#xff0c;行和列数据来定义视图的查询中使用的表&#xff08;基表&#xff09;&#xff0c;并且是在使用视图时动态生成的。 通俗的讲&#xff0c;视图只保存了…...

编程日记 2024/7/22 21:00:56

算法day05 master公式估算递归时间复杂度 归并排序 小和问题 堆排序

2.认识O(NlogN)的排序_哔哩哔哩_bilibili master公式 有这样一个数组&#xff1a;【0&#xff0c;4&#xff0c;2&#xff0c;3&#xff0c;3&#xff0c;1&#xff0c;2】&#xff1b;假设实现了这样一个sort()排序方法&#xff0c; 将数组二分成左右两等分&#xff0c;使用so…...

编程日记 2024/7/22 20:59:54

基于jeecgboot-vue3的Flowable流程仿钉钉流程设计器-支持VForm3表单的选择与支持

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、初始化的时候加载表单 /** 查询表单列表 */ const getFormList () > {listForm().then(res > formOptions.value res.result.records) } 2、开始节点的修改&#xff0c;增加表…...

编程日记 2024/7/22 20:56:52

【刷题汇总 -- 压缩字符串(一)、chika和蜜柑、 01背包】

C日常刷题积累 今日刷题汇总 - day0181、压缩字符串(一)1.1、题目1.2、思路1.3、程序实现 2、chika和蜜柑2.1、题目2.2、思路2.3、程序实现 3、 01背包3.1、题目3.2、思路3.3、程序实现 -- dp 4、题目链接 今日刷题汇总 - day018 1、压缩字符串(一) 1.1、题目 1.2、思路 读完…...

编程日记 2024/7/22 20:53:49

《Exploring Aligned Complementary Image Pair for Blind Motion Deblurring》

这篇论文的标题《Exploring Aligned Complementary Image Pair for Blind Motion Deblurring》可以翻译为《探索对齐的互补图像对用于盲运动去模糊》。从标题可以推断，论文的焦点在于开发一种算法或技术，利用成对的图像来解决运动模糊问题，特别是在不知道模糊核（即造成模糊…...

编程日记 2024/7/22 20:51:47

vue2学习笔记9 - 通过观察vue实例中的data,理解Vue中的数据代理

接着上一节&#xff0c;学一学vue中的数据代理。学vue这几天&#xff0c;最大的感受就是&#xff0c;名词众多&#xff0c;听得发懵。。不过&#xff0c;深入理解之后&#xff0c;其实说得都是一回事。 在Vue中&#xff0c;数据代理是指在实例化Vue对象时&#xff0c;将data对…...

编程日记 2024/7/22 20:45:42

04 Git与远程仓库

第4章&#xff1a;Git与远程仓库 一、Gitee介绍及创建仓库 一&#xff09;获取远程仓库 ​ 使用在线的代码托管平台&#xff0c;如Gitee&#xff08;码云&#xff09;、GitHub等 ​ 自行搭建Git代码托管平台&#xff0c;如GitLab 二&#xff09;Gitee创建仓库 ​ gitee官…...

编程日记 2024/7/22 20:42:39

数据库之表的查询

一.新建表&#xff1a; mysql> create table t_worker(-> department_id int(11) not null comment部门号,-> worker_id int(11) primary key not null comment职工号,-> worker_date date not null comment工作时间,-> wages float(8,2) not null comment工资,…...

编程日记 2024/7/22 20:41:38

String 和StringBuilder字符串操作快慢的举例比较

System.currentTimeMillis(); //当前时间与1970年1月1日午夜UTC之间的毫秒差。public class HelloWorld {public static void main(String[] args) {String s1 "";StringBuilder s2 new StringBuilder("");long time System.currentTimeMillis();long s…...

编程日记 2024/7/22 20:40:37

Java代码基础算法练习-竞猜卡片值-2024.07.22

任务描述&#xff1a; 小米和小王玩竞猜游戏&#xff1a;准备7张卡片包含数字2、3、4、5、6、7、8&#xff0c;从中抽出2张&#xff08;有 顺序之分&#xff0c;抽2、3跟抽3、2是两种情况&#xff09;&#xff0c;猜2张卡片的和&#xff0c;如果是奇数&#xff0c;则猜对。小米…...

编程日记 2024/7/22 20:39:35

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2025/9/14 23:43:40

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/9/7 2:01:42

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/9/9 14:49:22

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/8/4 22:42:24

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2025/8/19 6:37:10

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/9/2 17:48:08

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/7/28 0:01:58

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2025/9/3 11:46:59

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2025/9/9 10:09:19

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

编程新知 2025/8/4 1:00:56