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

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

news 2026/3/28 13:58:29

文章目录

  • 目录

    文章目录

    本章要求

    一.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

终极指南：如何测试Binwalk自定义提取器：从单元测试到集成测试的完整方案

终极指南&#xff1a;如何测试Binwalk自定义提取器&#xff1a;从单元测试到集成测试的完整方案 【免费下载链接】binwalk Firmware Analysis Tool 项目地址: https://gitcode.com/gh_mirrors/bi/binwalk Binwalk 是一款强大的固件分析工具&#xff0c;专门用于识别和提…...

编程新知 2026/3/28 13:54:32

Coze插件实战：如何给你的AI小游戏添加图片生成和数据库功能

Coze插件实战&#xff1a;打造沉浸式AI小游戏的进阶技巧 想象一下&#xff0c;你正在开发一款让用户体验挥霍10亿财富的AI小游戏。用户每次选择不同的消费方式&#xff0c;都会触发一段图文并茂的故事情节&#xff0c;最终目标是花光所有钱。这种游戏不仅需要动态生成故事内容&…...

编程新知 2026/3/28 12:07:53

3步解锁Yuedu书源：终结小说断更烦恼，实现阅读自由

3步解锁Yuedu书源&#xff1a;终结小说断更烦恼&#xff0c;实现阅读自由 【免费下载链接】Yuedu &#x1f4da;「阅读」APP 精品书源&#xff08;网络小说&#xff09; 项目地址: https://gitcode.com/gh_mirrors/yu/Yuedu 你是否经历过这样的时刻&#xff1a;熬夜追更…...

编程新知 2026/3/28 11:53:41

独立开发者福音：Pixel Fashion Atelier镜像免配置+预设Prompt快速上手指南

独立开发者福音&#xff1a;Pixel Fashion Atelier镜像免配置预设Prompt快速上手指南 1. 为什么选择Pixel Fashion Atelier 如果你是一位独立游戏开发者或像素艺术爱好者&#xff0c;一定遇到过这样的困扰&#xff1a;想要快速生成高质量的像素风格时装素材&#xff0c;却苦于…...

编程新知 2026/3/28 11:05:15

OpenFeign性能优化最全实战

Feign 就是动态代理 模板化 HTTP 请求&#xff0c;帮你把接口方法自动转成 HTTP 调用。 完整执行流程&#xff08;8 步&#xff09; 启动时&#xff1a;FeignClient 接口被 Feign 扫描&#xff0c;生成动态代理类 调用时&#xff1a;执行接口方法 → 进入代理类 解析注解&…...

编程新知 2026/3/28 9:44:31

硬件工程师眼中的“省心”麦克风：MP421A-AT01E如何解决射频干扰与声音漂移

从“喂&#xff0c;听得到吗&#xff1f;”到“你说&#xff0c;我听着”&#xff1a;MP421A-AT01E如何让蓝牙耳机回归通话本质你有没有这样的经历&#xff1f;戴上刚买的蓝牙耳机&#xff0c;兴冲冲地给朋友打电话&#xff0c;结果对方第一句就是&#xff1a;“你那边好吵&…...

编程新知 2026/3/28 9:36:28

告别手动切图：用快马ai生成脚本，自动化ps设计稿导出与标注

作为一名长期与PS打交道的设计师&#xff0c;我深知重复性切图标注的痛苦。每次设计稿调整后&#xff0c;手动导出图层、记录样式、测量间距的过程不仅枯燥&#xff0c;还容易出错。最近尝试用InsCode(快马)平台的AI辅助生成自动化脚本&#xff0c;意外发现效率提升显著。以下是…...

编程新知 2026/3/28 9:34:25

藏在滴滴里的AI神器，轻松叫到“梦中情车”

【潮汐商业评论/文】在一线城市上班的00后小杨是个重度打车用户&#xff0c;从她滴滴会员常年v8就可见对打车的依赖程度。她住在城市远郊&#xff0c;工作日的通勤或是周末的聚会&#xff0c;她总习惯提前叫好车&#xff0c;对于车型她也有着自己的“小偏好”&#xff0c;总结就…...

编程新知 2026/3/28 9:34:25

CLIP-GmP-ViT-L-14基础教程：ViT-L-14 patch embedding尺寸与分辨率适配

CLIP-GmP-ViT-L-14基础教程&#xff1a;ViT-L-14 patch embedding尺寸与分辨率适配 1. 理解CLIP-GmP-ViT-L-14模型 CLIP-GmP-ViT-L-14是一个经过几何参数化(GmP)微调的CLIP模型&#xff0c;在ImageNet和ObjectNet数据集上能达到约90%的准确率。这个模型继承了CLIP的核心能力&…...

编程新知 2026/3/28 8:31:53

ZPL文件操作避坑指南：从OPEN到CLOSE的5个常见错误排查

ZPL文件操作避坑指南&#xff1a;从OPEN到CLOSE的5个常见错误排查 在光学设计领域&#xff0c;ZPL宏作为ZEMAX的自动化利器&#xff0c;文件操作是绕不开的核心技能。但当你从教程里的完美示例转向真实项目时&#xff0c;那些被刻意简化的场景往往会暴露出各种"坑"。…...

编程新知 2026/3/28 6:58:53