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

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

news 文章来源：https://blog.csdn.net/zhoutong2323/article/details/135347060 2024/11/7 2:42:28

文章目录

  • 目录

    文章目录

    本章要求

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

计算机网络 VLAN

路由器将多个局域网连接起来&#xff0c;而交换机将一个局域网里的设备连接起来。 路由器的端口分配局域网的网段&#xff08;子网网段&#xff09;&#xff0c;局域网的内部设备的ip都在这个网段里&#xff0c;再由交换机将数据派发到目的设备&#xff0c;交换机是按照MAC地址…...

编程日记 2024/1/3 13:12:46

docker搭建Dinky —— 筑梦之路

简介 Dinky 是一个 开箱即用 、易扩展 &#xff0c;以 Apache Flink 为基础&#xff0c;连接 OLAP 和 数据湖 等众多框架的 一站式 实时计算平台&#xff0c;致力于 流批一体 和 湖仓一体 的探索与实践。 主要功能 其主要功能如下&#xff1a; 沉浸式 FlinkSQL 数据开发&#x…...

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

Python基础（十四、数据容器之集合Set）

文章目录 一、集合语法二、集合的基本操作添加元素删除元素随机删除元素&#xff0c;可获得删除的值清空取出2个集合的差集消除2个集合的差集合并2个集合集合元素个数查询元素是否存在 遍历集合集合的遍历 什么是数据容器&#xff1f; 数据容器是Python中用于存储和操作数据的对…...

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

OpenHarmony之HDF驱动框架

概述 HDF&#xff08;Hardware Driver Foundation&#xff09;驱动框架&#xff0c;为驱动开发者提供驱动框架能力&#xff0c;包括驱动加载、驱动服务管理、驱动消息机制和配置管理。并以组件化驱动模型作为核心设计思路&#xff0c;让驱动开发和部署更加规范&#xff0c;旨在…...

编程日记 2024/1/3 13:00:35

深入浅出理解TensorFlow的padding填充算法

一、参考资料 notes_on_padding_2 二、TensorFlow的padding算法 本文以TensorFlow v2.14.0版本为例&#xff0c;介绍TensorFlow的padding算法。 tf.nn.conv2d # https://github.com/tensorflow/tensorflow/blob/v2.14.0/tensorflow/python/ops/nn_ops.py#L2257-L2361paddi…...

编程日记 2024/1/3 12:57:32

TDD-LTE 附着流程和去附着流程

目录 1. 附着流程 1.1. 正常附着流程 2. 异常附着流程 2.1 RRC建立失败 2.2 核心网拒绝 2.3 eNodeB未收到初始化上下文建立请求 2.4 RRC重配置请求丢失 2. 去附着流程 2.1 非关机去附着流程 2.1.1 连接态非关机去附着 2.1.2 空闲态非关机去附着 2.2 关机去附着流程 …...

编程日记 2024/1/3 12:54:29

[Angular] 笔记 23：Renderer2 - ElementRef 的生产版本

chatgpt: Renderer2 简介 在 Angular 中&#xff0c;Renderer2 是一个服务&#xff0c;用于处理 DOM 操作的抽象层。它提供了一种安全的方式来操作 DOM&#xff0c;同时与平台无关&#xff0c;有助于维护应用程序的跨浏览器兼容性和安全性。 Renderer2 的作用是在 Angular 组…...

编程日记 2024/1/3 12:51:27

WEB：探索开源OFD.js技术应用

1、简述 OFD.js 是一个由开源社区维护的 JavaScript 库&#xff0c;专注于在浏览器中渲染和处理 OFD 文件。OFD 作为一种开放式的文档格式&#xff0c;被广泛应用于电子政务、电子合同等领域。OFD.js 的出现为开发者提供了一个强大的工具&#xff0c;使得在前端实现 OFD 文件的…...

编程日记 2024/1/3 12:50:26

平方根，又叫二次方根，表示为〔√￣〕

正在加载中... 平方根&#xff0c;又叫二次方根&#xff0c;表示为〔√&#xffe3;〕&#xff0c;如&#xff1a; 平方根&#xff0c;又叫二次方根&#xff0c;表示为〔√&#xffe3;〕&#xff0c;如&#xff1a;数学语言为&#xff1a;√&#xffe3;164。语言描述为&…...

编程日记 2024/1/3 12:49:25

Springer Latex正文参考文献样式改为数字

用过爱斯唯尔的latex&#xff0c;正文参考文献都是数字&#xff0c;第一次用Springer Latex的参考文献竟然是authoryear&#xff0c;如下&#xff1a; 将这种样式变回序号样式&#xff1a; &#xff08;1&#xff09;使用这个documentclass&#xff08;此为双栏&#xff09; …...

编程日记 2024/1/3 12:46:20

静安网站建设公司/网站申请流程

DHC MRSL注册认证符合性指南&#xff0c;ZDHC等级认证辅导机构 达到ZDHC一致性的旅程始于化学品制造商将其产品组合上传到ZDHC网关。此过程实际上是化学公司的自我声明&#xff0c;即其Gateway列出的产品符合ZDHC MRSL V2.0中指定的限制&#xff0c;从而使其能够在有限的时间…...

编程日记 2024/11/7 1:46:58

高端网站建设找哪个公司/优化师是一份怎样的工作

学习理论之偏差与方差 转载自 http://www.cnblogs.com/90zeng/ 作者&#xff1a;博客园-90Zeng 1. 偏差和方差平衡 在线性回归中&#xff0c;对于同一个数据集&#xff0c;可以拟合出简单的线性模型或者较为复杂一些的多项式例如&#xff1a; 图中的训练样本是一致的&…...

编程日记 2024/11/7 0:11:47

如何让网站做成移动版/百度搜图

Markdown 做好用的编辑器 Typora 阅读目录 一级标题一级标题导语&#xff1a; Markdown是一种轻量级的标记语言&#xff0c;语法简单&#xff0c;学习成本不算太高&#xff0c;但确实可以让你专注于文字&#xff0c;不用太分心与排版等等。 Markdown 官方文档 这里可以看到官方…...

编程日记 2024/11/6 21:43:49

建站网站官方/网站建设规划书

frp中文文档&#xff1a;https://github.com/fatedier/frp/blob/v0.14.0/README_zh.md frp配置文件下载&#xff1a;https://github.com/fatedier/frp/releases/tag/v0.21.0 配置文件下载说明&#xff1a; linux服务器&#xff1a;frp_0.21.0_linux_amd64.tar.gz 树莓派&#x…...

编程日记 2024/11/6 21:33:25

什么网站可以做私房菜外卖/网络优化的工作内容

目录 简略说明 详细说明 Yum apt-get dnf Homebrew 区别 YUM和DNF的区别 Yum和apt-get的区别 Yum和rpm的区别 常用命令 yum/dnf 常用命令 rpm命令 linux命令好玩的命令 简略说明 apt-get 是德班系&#xff08;Debian、Ubuntu等&#xff09;的软件管理命令 yum 是红帽系&#xf…...

编程日记 2024/11/6 18:45:27

wordpress主题更新教程/网站优化培训学校

概念整理汇总&#xff1a;1.专业术语&#xff1a;CH4&#xff1a;曲率&#xff1a;曲线的曲率(curvature)就是针对曲线上某个点的切线方向角对弧长的转动率&#xff0c;通过微分来定义&#xff0c;表明曲线偏离直线的程度。数学上表明曲线在某一点的弯曲程度的数值。曲率越大&a…...

编程日记 2024/11/6 16:19:37