WEB前端06-BOM对象

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 数量。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/47465.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MacOS命令行运行fortran程序|编程私教解答

你好&#xff0c;我是悦创。 Fortran 是一种经典的编程语言&#xff0c;广泛用于科学计算和工程领域。如果你使用 macOS 系统并希望在命令行环境中编译和运行 Fortran 程序&#xff0c;这篇教程将引导你完成整个过程。 1. 准备工作 首先&#xff0c;确保你的 macOS 系统已安…

【Android】传给后端的Url地址被转码问题处理

一、问题 为什么使用Gson().toJson的时候&#xff0c;字符串中的会被转成\u003d 在 Gson 中&#xff0c;默认情况下会对某些特殊字符进行 HTML 转义&#xff0c;以确保生成的 JSON 字符串在 HTML 中是安全的。因此&#xff0c;字符 会被转义为 \u003d。你可以通过禁用 HTML 转…

区块链资料

Quantstamp - Public Security Assessments smart-contract-sanctuary-bsc/contracts/mainnet at master tintinweb/smart-contract-sanctuary-bsc GitHub https://github.com/slowmist/Cryptocurrency-Security-Audit-Guide/blob/main/README_CN.md sFuzz: 高效自适应的智…

Spring3(代理模式 Spring1案例补充 Aop 面试题)

目录 一、代理模式 介绍 意图 主要解决的问题 使用场景 实现方式 关键代码 应用实例 优点 缺点 使用建议 注意事项 结构 什么是代理模式&#xff1f; 为什么要用代理模式&#xff1f; 有哪几种代理模式&#xff1f; 1. 静态代理 实现 2. 基于接口的动态代理…

打造代码规范:在Gradle中配置代码风格检查

打造代码规范&#xff1a;在Gradle中配置代码风格检查 在软件开发过程中&#xff0c;代码风格一致性是保证项目质量和可维护性的重要因素。Gradle作为一个强大的构建工具&#xff0c;支持多种代码风格检查工具&#xff0c;如Checkstyle、PMD、FindBugs等。本文将详细介绍如何在…

MATLAB基础应用精讲-【数模应用】非线性回归模型

目录 前言 算法原理 非线性回归参数估计 模型评估 非线性回归方法 1、SVR 2、决策树回归 3、knn回归 4、RandomForest回归 5、XGBoost回归 6、神经网络MLP回归 7、LightGBM回归 8、GBDT回归 算法步骤: 非线性回归预测模型 一、数据探索 二、建立线性回归模型…

Android Studio环境安装指南

一、安装前注意事项&#xff1a; 安装android studio之前&#xff0c;请先检查下操作系统中的用户名(C盘->用户或user)下是否含有中文&#xff0c;如果含有中文&#xff0c;请新建一个用户&#xff08;必须全部英文&#xff09;&#xff0c;JDK的安装和配置也请重新安装和配…

.Net Core中的内存缓存实现——Redis及MemoryCache(2个可选)方案的实现

ASP.NET Core 支持多个不同的缓存。 最简单的缓存基于 IMemoryCache。 IMemoryCache 表示存储在 Web 服务器内存中的缓存。 在服务器场&#xff08;多个服务器&#xff09;中运行的应用应确保在使用内存中缓存时会话是粘滞的。 粘滞会话可确保来自客户端的请求都转到同一服务器…

《昇思25天学习打卡营第20天|GAN图像生成》

生成对抗网络&#xff08;GAN&#xff09;是一种深度学习模型&#xff0c;用于生成逼真的图像。在手写数字识别的任务中&#xff0c;GAN 可以用来生成与真实手写数字相似的图像&#xff0c;以增强模型的训练数据集。GAN 主要由两个部分组成&#xff1a;生成器&#xff08;Gener…

服务自旋:Eureka中实现服务的动态注册与注销

标题&#xff1a;服务自旋&#xff1a;Eureka中实现服务的动态注册与注销 在微服务架构中&#xff0c;服务的动态注册和注销是确保服务发现机制灵活性和准确性的关键。Eureka&#xff0c;作为Netflix开源的服务发现框架&#xff0c;提供了强大的支持来实现服务实例的动态注册和…

Spring Data Jpa 原生SQL联表查询返回自定义DTO

Spring Data Jpa 原生SQL联表查询返回自定义DTO 方案一&#xff1a;返回Map 这个就不说了 方案二&#xff1a;实体定义成接口的形式 该方式最直观&#xff01;&#xff01;推荐&#xff01;&#xff01;&#xff01; 注意&#xff1a;XxxDto是interface接口&#xff0c;而…

WPF/C#:在WPF中如何实现依赖注入

前言 本文通过 WPF Gallery 这个项目学习依赖注入的相关概念与如何在WPF中进行依赖注入。 什么是依赖注入 依赖注入&#xff08;Dependency Injection&#xff0c;简称DI&#xff09;是一种设计模式&#xff0c;用于实现控制反转&#xff08;Inversion of Control&#xff0…

[Redis]典型应用——缓存

什么是缓存 缓存&#xff08;Cache&#xff09;是一种用于临时存储数据的机制&#xff0c;目的是提高数据访问速度和系统性能。 核心思路就是把一些常用的数据放到触手可及(访问速度更快)的地方&#xff0c;方便随时读取 缓存是一个相对的概念&#xff0c;比如说&#xff0c…

EE trade:强平和爆仓的区别

在金融交易市场中&#xff0c;杠杆交易的引入&#xff0c;让投资者可以用少量的资金撬动更大的头寸&#xff0c;获取更大的收益。然而&#xff0c;杠杆交易也带来了更大的风险&#xff0c;一旦市场波动&#xff0c;投资者可能会面临强平或爆仓的风险。了解强平和爆仓的区别&…

选择Maya进行3D动画制作与渲染的理由

如果你对3D动画充满热情并追求成为专业3D动画师的梦想&#xff0c;你一定听说过Maya——近年来3D动画的行业标准。Maya被3D艺术家广泛使用&#xff0c;你是否想知道为什么Maya总是他们的首选&#xff1f;下面一起来了解下。 一、什么是Maya&#xff1f; 由Autodesk开发的Maya是…

2024年土木建筑与结构工程国际会议(IACCASE 2024)

2024年土木建筑与结构工程国际会议 2024 International Conference on Civil and Structural Engineering 【1】会议简介 2024年土木建筑与结构工程国际会议旨在为全球土木建筑与结构工程领域的专家学者、研究人员及从业人员提供一个交流与合作的平台。会议聚焦该领域的最新研究…

Java Spring Boot的三层结构

在Java Spring Boot开发中&#xff0c;三层架构是一种常见的设计模式&#xff0c;它通过将应用程序分为表现层&#xff08;Controller层&#xff09;、业务逻辑层&#xff08;Service层&#xff09;和数据访问层&#xff08;Repository层&#xff09;&#xff0c;来提高代码的可…

nng协议nni_posix_resolv_sysinit()系统初始化

nni_posix_resolv_sysinit(void) 实现了一个初始化函数 nni_posix_resolv_sysinit&#xff0c;用于设置解析系统&#xff08;resolver system&#xff09;。它主要负责初始化解析线程池&#xff0c;用于并发处理域名解析请求。 源码&#xff1a; int nni_posix_resolv_sysini…

影院选座系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;影院信息管理&#xff0c;电影类型管理&#xff0c;放映厅管理&#xff0c;电影信息管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;影院信息&…

Node.js实现文件下载

1.设置响应头&#xff1a; 使用 res.writeHead 设置适当的响应头&#xff0c;包括 Content-Type 和 Content-Disposition 以触发下载对话框。 2.创建文件读取流&#xff1a; 使用 fs.createReadStream 创建文件读取流&#xff0c;并通过 pipe 方法将其连接到响应对象 res&#…