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

HTML----JavaScript操作对象BOM对象

news 2025/12/15 17:37:42

文章目录

  • 目录

    文章目录

    本章要求

    一.BOM模型概述

    二.BOM核心：window对象

     常用属性

    常用方法：

    confirm() 案例

     open ()+close()案例

    setTimeout( ) 案例

     setInterval( ) 案例

    document对象

    练习

本章要求

  • 了解BOM模型
  • 掌握BOM模型实际应用

一.BOM模型概述

    BOM（浏览器对象模型）是JavaScript中的一个重要概念，它提供了一组用于控制浏览器窗口和页面内容的对象和方法。

BOM可实现功能：

  • 弹出新的浏览器窗口 移动、
  • 关闭浏览器窗口以及调整窗口的大小
  • 页面的前进、后退

二.BOM核心：window对象

        window对象：表示浏览器窗口或框架。它是BOM的顶层对象，包含了浏览器窗口的各种属性和方法，比如窗口大小、位置、打开新窗口等。

 常用属性

  • history 属性

history属性是一个表示浏览器历史记录的对象。通过history属性可以使用JavaScript执行以下操作：返回上一个页面，进入下一个页面，获取历史记录长度等等。

  •  location属性

location属性表示当前文档的URL地址。它提供了访问和操作URL的方法。

通过上述属性实现的功能和浏览器左上角前进，后退，刷新等按钮一致。

 案例

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8">
<title>主页面</title>
<style type="text/css">
body{margin: 0px auto;text-align:center;
}
</style>
</head>
<body>
<img src="images/flow.jpg" alt="鲜花" /><br />
<a href="javascript:history.back()">返回主页面</a></p><!--返回上一级页面-->
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
<a href="javascript:location.reload()">刷新本页</a><!--点击重新加载本页面-->
</body>
</html>

常用方法：

针对window对象的常用方法是对浏览器窗口进行一系列操作，例如点击某个按钮关闭，关闭某页面时需要再次确认等等，这些都可以通过下面的常用方法实现。

prompt() 以及alert()案例在前文基础篇中有详细介绍此处不做过多赘述，重点讲解剩余几种

  • confirm() 案例

confirm() :显示一个带有提示信息，确定和取消按钮的对话框。

语法

window.confirm("提示信息")
<script type="text/javascript">var flag = window.confirm("确认要关闭这个页面嘛？")if(flag == true){window.alert("正在关闭页面，请稍后...");}else{window.alert("已取消关闭...");}
</script>

  •  open ()+close()案例

 open ()：打开一个新的浏览器窗口，加载给定 URL 所指定的文档。

close()：关闭浏览器页面

语法：

window.open("弹出窗口的url")
<body><script type="text/javascript">function open_index(){window.open("open.html");}function close_index(){window.close();}</script><input type="button" value="点击此处调用open函数打开新页面" onclick="open_index()"/><input type="button" value="点击此处关闭页面" onclick="close_index()"/>
</body>

 

  • setTimeout( ) 案例

 在指定的毫秒数后调用函数或计算表达式。

语法

window.setTimeout("调用的函数",毫秒数);

案例 

<body><p>此页面等待5秒后自动跳转...</p><script type="text/javascript">function fun1(){document.write("这是5秒后执行的函数页面");}window.setTimeout("fun1()",5000);</script>
</body>

  •  setInterval( ) 案例

按照指定的周期（以毫秒计）来调用函数或表达式

语法

window.setInterval("调用的函数",毫秒数);

案例 

<body><p>此页面等待3秒后自动跳转...</p><script type="text/javascript">function fun1(){document.write("这是3秒后执行的函数页面");}window.setInterval("fun1()",3000);</script>
</body>

document对象

CSS中选择器代表站在CSS角度去找html文档中的标签，document对象则是站在javascript角度去找html文档中的标签。简单来说，document是JS中的选择器。

通过referrer()：返回含有当前问文档的URL

 案例

  • 领奖页面代码

下面的代码中含有 href="praise.html" 即该URL含有奖品显示页面文档，因此当点击超链接跳转时，奖品显示页面会导入领奖页面的URL，此时if 语句中URL不为空，页面将显示

”大奖赶快拿啦！笔记本！数码相机！" 字样。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>领奖页面</title><style type="text/css">body,h1{margin: 0;padding: 0;}.prize{text-align: center;}</style>
</head>
<body>
<div class="prize"><img src="images/d1.jpg" alt="中奖" /><h1><a href="praise.html">马上去领奖啦！</a></h1>
</div>
</body>
</html>
  • 奖品显示页面代码 

直接运行后，未载入本页面文档地址，URL问空，将显示"您不是从领奖页面进入，5秒后将自动跳转到登录页面"

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>奖品显示页面</title><style type="text/css">body{margin: 0;}</style>
</head>
<body><script type="text/javascript">var url = document.referrer;  //载入本页面文档的地址（从哪来的）if(url == ""){document.write("<h2>您不是从领奖页面进入，5秒后将自动跳转到登录页面</h2>");//新技术点(定时函数)window.setTimeout("location.href='login.html'",5000);	}else{document.write("<h2>大奖赶快拿啦！笔记本！数码相机！</h2>");}</script>
</body>
</html>
  • 定时函数跳转页面代码 

5s后自动跳转到该页面


<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>登录页面</title><style type="text/css">body{margin: 0;}</style>
</head>
<body>
<img src="images/login.jpg" alt="登录图片"/>
</body>
</html>

练习

相关文章：

HTML----JavaScript操作对象BOM对象

文章目录 目录 文章目录 本章要求 一.BOM模型概述 二.BOM核心&#xff1a;window对象 常用属性 常用方法&#xff1a; confirm() 案例 open ()close()案例 setTimeout( ) 案例 setInterval( ) 案例 document对象 练习 本章要求 了解BOM模型掌握BOM模型实际应用 一.BOM模型…...

编程日记 2024/1/3 14:03:36

隆道数智大会回顾|第13期《如何构建绿色产业供应链新生态》（完）

本期演讲嘉宾&#xff1a; 史文月 采购与供应链专家 邢庆峰 品类管理和质量管理专家 刘婷婷 中兴通讯供应链规划总监 张燕华 正大生物CIO 吴树贵 隆道公司总裁 本期演讲主题&#xff1a; 如何构建绿色产业供应链新生态 本期内容要点&#xff1a; 1.供应链管理的核心问…...

编程日记 2024/1/3 14:00:33

粒子群优化pso结合bp神经网络优化对csv文件预测matlab(3)

1.csv数据为密西西比数据集&#xff0c;获取数据集可以管我要&#xff0c;数据集内容形式如下图&#xff1a; 2.代码 这里参考的是b站的一位博主。 数据集导入教程在我的另一篇文章bp写过&#xff0c;需要的话可以去看一下 psobp.m close all clc%读取数据 inputX; outputY;…...

编程日记 2024/1/3 13:53:26

软性演员-评论家算法 SAC

软性演员-评论家算法 SAC 软性演员-评论家算法 SAC优势原理软性选择模型结构目标函数重参数化熵正则化代码实现 软性演员-评论家算法 SAC 优势原理 DDPG 的问题在于&#xff0c;训练不稳定、收敛差、依赖超参数、不适应复杂环境。 软性演员-评论家算法 SAC&#xff0c;更稳定…...

编程日记 2024/1/3 13:52:25

Nginx多域名部署多站点

目录 1.修改配置文件nginx.conf 2. 修改hosts文件 1.修改配置文件nginx.conf 在配置文件的 server_name 处修改成自己需要的域名&#xff0c;然后保存退出 j 查看语法是否错误&#xff0c;然后重启nginx nginx -t # 查看语法是否正确 systemctl restart nginx # 重启nginx …...

编程日记 2024/1/3 13:50:22

Java的常规面试题

Java的面试题主要涉及Java基础知识、并发编程、集合原理、JVM原理、I/O与网络编程、设计模式、互联网常用框架等多个领域[6]。一些常见的面试问题包括&#xff1a; 1. 面向对象的特征&#xff1a;继承、封装和多态性。 2. 访问修饰符public、private、protected以及默认时的区别…...

编程日记 2024/1/3 13:44:16

大数据技术发展史

文章目录 Google论文HadoopHive大数据生态 Google论文 今天我们常说的大数据技术&#xff0c;其实起源于Google在2004年前后发表的三篇论文&#xff0c;也就是我们经常听到的“三驾马车”&#xff0c;分别是分布式文件系统GFS、大数据分布式计算框架MapReduce和NoSQL数据库系统…...

编程日记 2024/1/3 13:42:14

linux常见基础指令

入门常见基础指令 ls、stat、 pwd 、cd、tree、 whoami、 touch、 mkdir、 rm 、 man、 cp、mv、cat、tac、echo、>、 >>、 < 、more、 less、 head、 tail、date、 cal、 find、 which、alias、whereis、grep、zip与unzip、 tar、bc、uname、xargs... 热键Tab、…...

编程日记 2024/1/3 13:40:13

“人家赚那么多”系列01：如何练习？练什么？

01 如何练习&#xff1f;练习什么&#xff1f; 今年计划重点围绕「在不骗自己的前提下&#xff0c;如何才能把事儿彻底做好&#xff0c;并做得有声有色&#xff1f;」为主题来写点儿东西&#xff0c;聊聊我是怎么做的&#xff0c;如何通过一些有效的方法来不断优化自己的。 想把…...

编程日记 2024/1/3 13:39:11

【Android】使用android studio查看内置数据库信息

要使用Android Studio查看内置数据库信息&#xff0c;可以按照以下步骤进行操作&#xff1a; 打开Android Studio并打开你的项目。 在左侧的Project窗口中&#xff0c;找到并展开你的app模块。 找到并展开"app" > "src" > "main"文件夹。…...

编程日记 2024/1/3 13:36:08

PHP开发日志 ━━ 基于PHP和JS的AES相互加密解密方法详解(CryptoJS) 适合CryptoJS4.0和PHP8.0

最近客户在做安全等保&#xff0c;需要后台登录密码采用加密方式&#xff0c;原来用个base64变形一下就算了&#xff0c;现在不行&#xff0c;一定要加密加key加盐~~ 前端使用Cypto-JS加密&#xff0c;传输给后端使用PHP解密&#xff0c;当然&#xff0c;前端虽然有key有盐&…...

编程日记 2024/1/3 13:33:06

2021-01-03 excel实现列递增，行保持不变

需求&#xff1a;excel文档数据操作的时候发现自动递增只能实现列不变行号递增 我这里里需要的是列递增行不变 解决方式&#xff1a;通过一些函数的组合使用 INDIRECT("驻场明细!"&CHAR(ROW()62)&ROW(驻场明细!A$28)) INDIRECT()函数的使用&#xff1a; INDI…...

编程日记 2024/1/3 13:32:05

[Python]两个杯子取水问题

利用两个杯子巧取三升水&#xff1a; 今天的这个趣味数学小游戏是利用两个没有刻度的水杯&#xff0c;巧妙地取出三升水来。 题目的条件是&#xff1a;一个总容量为6升的杯子和一个总容量为5升的杯子&#xff0c;同时面前有无限容量的水供你使用。不借助其它任何的容器&#xf…...

编程日记 2024/1/3 13:31:04

C++汇编语言学习计划

前几天买了某游戏的外挂&#xff0c;感觉外挂在我计算机上进行了不少操作&#xff0c;我想一探究竟&#xff0c;可是只有exe&#xff0c;没办法&#xff0c;翻译成汇编我也看不懂&#xff0c;索性来简单学习下。访问Chatgpt4&#xff0c;给了如下学习计划。 要从零开始学习C生成…...

编程日记 2024/1/3 13:28:01

微信服务号升级订阅号条件

服务号和订阅号有什么区别&#xff1f;服务号转为订阅号有哪些作用&#xff1f;首先我们要看一下服务号和订阅号的主要区别。1、服务号推送的消息没有折叠&#xff0c;消息出现在聊天列表中&#xff0c;会像收到消息一样有提醒。而订阅号推送的消息是折叠的&#xff0c;“订阅号…...

编程日记 2024/1/3 13:25:59

SpringBoot整合mybatis多数据源

废话不多说先上结果 对应数据库 首先导入所需的mybatis、mysql和lombok依赖 <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.2</version></dependen…...

编程日记 2024/1/3 13:24:58

垃圾收集器与内存分配策略

内存分配和回收原则 对象优先在Eden区分配 大对象直接进入老年代 长期存活的对象进入老年代 什么是内存泄漏 不再使用的对象在系统中未被回收&#xff0c;内存泄漏的积累可能会导致内存溢出 自动垃圾回收与手动垃圾回收 自动垃圾回收&#xff1a;由虚拟机来自动回收对象…...

编程日记 2024/1/3 13:23:57

Python计算三角形的面积

Python 计算三角形的面积 以下实例为通过用户输入三角形三边长度&#xff0c;并计算三角形的面积&#xff1a; # 三角形第一边长 a 3 # 三角形第二边长 b 4 c float( input("输入三角形第三边长: ") ) # 计算半周长 s (a b c) / 2 # 计算…...

编程日记 2024/1/3 13:18:53

198.【2023年华为OD机试真题（C卷）】万能字符单词拼写（JavaPythonC++JS实现）

🚀点击这里可直接跳转到本专栏，可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路，高质量解题代码(Java&Python&C++&JS分别实现)，详细代码讲解，助你深入学习，深度掌握！ 文章目录 一. 题目-万能字符单词拼写二.解题思路三.题解代码Pytho…...

编程日记 2024/1/3 13:17:52

Tomcat服务为什么起不来？

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 服务跑在Tomcat下面&#xff0c;有时候会遇到Tomcat起不来的情况。目前为止常遇到的情况有如下几种&#xff1a; 1. Tomcat服务…...

编程日记 2024/1/3 13:16:51

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2025/12/12 18:53:22

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/12/12 8:18:42

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/12/14 10:18:18

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/12/14 20:54:38

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

编程新知 2025/12/15 1:46:40