javascript操作BOM的方法

目录

1.window.alert()

2.window.confirm()

3.window.prompt()

4.window.location()

5.window.navigator()

6.window.screen()

7.window.history()

8.window.setTimeout() 和 window.clearTimeout()

9.window.setInterval() 和 window.clearInterval()


BOM(Browser Object Model)是浏览器对象模型,它提供了独立于任何特定文档的对象,用于浏览器窗口和浏览器窗口中的脚本之间的交互。以下是一些常用的 JavaScript 操作 BOM 的方法:

1.window.alert()

弹出一个警告框,显示指定的文本和 OK 按钮。

window.alert("这是一个警告框!");

2.window.confirm()

弹出一个带有确定和取消按钮的对话框,并返回用户的选择(true 或 false)。

var result = window.confirm("你确定要继续吗?");  
if (result) {  
    console.log("用户点击确定");  
} else {  
    console.log("用户点击取消");  
}

3.window.prompt()

弹出一个带有文本输入字段和确定及取消按钮的对话框,并返回用户输入的文本(如果用户点击确定)或 null(如果用户点击取消)。

var name = window.prompt("请输入你的名字", "Harry Potter");  
console.log("你好," + name + "!");

4.window.location()

用于获取或设置窗口的 URL,并可以解析 URL 的各个组成部分。

// 设置窗口的 URL  
window.location.href = "https://www.example.com";  
  
// 获取当前 URL  
var currentURL = window.location.href;  
console.log(currentURL);  
  
// 获取 URL 的各个部分  
var hostname = window.location.hostname; // example.com  
var pathname = window.location.pathname; // /path/to/page.html  
var search = window.location.search; // ?query=string  
var hash = window.location.hash; // #section

5.window.navigator()

包含有关浏览器的信息。

var browserName = window.navigator.appName;  
var browserVersion = window.navigator.appVersion;  
console.log("浏览器名称:" + browserName);  
console.log("浏览器版本:" + browserVersion);

6.window.screen()

包含有关客户端屏幕的信息。

var screenWidth = window.screen.width;  
var screenHeight = window.screen.height;  
console.log("屏幕宽度:" + screenWidth);  
console.log("屏幕高度:" + screenHeight);

7.window.history()

允许脚本与浏览器的历史记录进行交互。

// 后退一页  
window.history.back();  
  
// 前进一页  
window.history.forward();  
  
// 加载历史列表中的特定页面  
window.history.go(n); // n 为要加载的页面在历史列表中的相对位置

8.window.setTimeout() 和 window.clearTimeout()

用于在指定的毫秒数后执行函数,或取消之前设置的定时器。

// 设置定时器  
var timerId = window.setTimeout(function() {  
    console.log("5 秒后执行此函数");  
}, 5000);  
  
// 取消定时器  
window.clearTimeout(timerId);

9.window.setInterval() 和 window.clearInterval()

用于每隔指定的毫秒数重复执行函数,或取消之前设置的间隔定时器。

// 设置间隔定时器  
var intervalId = window.setInterval(function() {  
    console.log("每秒执行此函数");  
}, 1000);  
  
// 取消间隔定时器  
window.clearInterval(intervalId);

以上只是 BOM 的一部分功能,实际上 BOM 还提供了更多的方法和对象,用于与浏览器进行交互。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unity 轮转图, 惯性, 自动回正, 点击选择

简单的实现 2D 以及 3D 的轮转图, 类似于 Web 中无限循环的轮播图那样. 文中所有代码均已同步至 github.com/SlimeNull/UnityTests 3D 轮转图: Assets/Scripts/Scenes/CarouselTestScene/Carousel.cs2D 轮转图: Assets/Scripts/Scenes/CarouselTestScene/UICarousel.cs 主要逻…

【学习记录】C++面向对象高级编程【更新中】

C面向对象高级编程 1 inline-内联函数1.1 什么是内联函数?1.2 为什么需要内联函数? 2 构造函数2.1 构造函数是什么?2.2 为什么需要构造函数?2.3 ctor(构造函数)可以有很多个-overloading重载2.4 ctors放在private区-Singleton 3 参…

Anthropic发布最强大模型Claude 3,实力碾压GPT-4和Gemini!

前言 2024年3月4日,Anthropic 发布了Claude 3新版系列模型,含Haiku、Sonnet 和 Opus三个版本。其中最强大的模型在各种基准测试中均优于OpenAI的GPT-4和Google的 Gemini 1.0 Ultra,已成为大模型领域的新巨头。 大家如果对AI感兴趣&#xff0c…

TensorRT入门:trtexec开发辅助工具的使用

文章目录 一、trtexec简介二、trtexec使用1.trtexec常用参数1. 构建阶段2. 运行阶段 2.基本使用方法1. trtexec最基本的使用方法,读取onnx模型并通过trtexec测试推理性能。2. trtexec解析ONNX文件,使用优化选择构建TensorRT引擎并保存至.plan文件补充&am…

力扣--动态规划64.最小路径和

思路分析: 基本思路: 本算法采用动态规划的思想,通过构建一个额外的二维矢量 dp 来存储每个位置的最小路径和。最终目标是求得右下角位置的最小路径和,即整个网格的最小路径和。 初始化: 初始化矢量的行数和列数&…

使用awk和正则表达式过滤文本或字符串 - 详细指南和示例

当我们在 Linux 中运行某些命令来读取或编辑字符串或文件中的文本时,我们经常尝试将输出过滤到感兴趣的特定部分。这就是使用正则表达式派上用场的地方。 什么是正则表达式? 正则表达式可以定义为表示多个字符序列的字符串。关于正则表达式最重要的事情之…

考研数学|数一125学长备考经验+资料

考研数学复习规划的关键,是不要执着于进度,不要执着于每天每个时间段准确的划分去做什么做什么,就好像完成任务的权重大于复习质量的权重一样,本末倒置了。 正确的做法,是聚焦于学习质量,持之以恒。所需要掌…

FreeRTOS操作系统学习——FreeRTOS工程创建

FreeROTS工程创建 详细步骤 如无特殊情况,大部人都要配置为外部高速时钟 另外,本实验使用了FreeRTOS,FreeRTOS的时基使用的是Systick,而 STM32CubeMX中默认的HAL库时基也是Systick,为了避免可能的冲突,最…

如何理解XML解析库?

untangle untangle 是一个简洁的用于解析 XML 文档的库。输入一个 XML 文档后&#xff0c;untangle 将文档的结构映射成结点和属性&#xff0c;并返回一个 Python 对象。 形如以下的 XML 文件&#xff1a; <?xml version"1.0"?> <root><child nam…

BUUCTF-Misc-[安洵杯 2019]Attack1

题目链接&#xff1a;BUUCTF在线评测 (buuoj.cn) 下载附件打开是一个流量包文件 拖到kali尝试用foremost是否可以分离 分离出来一个压缩包需要密码&#xff1a; 寻找密码&#xff0c;打开数据包导出http数据&#xff0c;发现一个lsass.dump文件 使用kali中mimkatz命令查看 得到…

测试需求平台10-DBUtils 优化数据连接与 SQL Limit 实现分页

✍此系列为整理分享已完结入门搭建《TPM提测平台》系列的迭代版&#xff0c;拥抱Vue3.0将前端框架替换成字节最新开源的arco.design&#xff0c;其中约60%重构和20%新增内容&#xff0c;定位为从 0-1手把手实现简单的测试平台开发教程&#xff0c;内容将囊括基础、扩展和实战&a…

干货!带你快速了解Python元组

1.元组 元组一般用来存储多个数据&#xff0c;使用() 2.创建元组 创建空元组 tup1 () print(tup1) # () print(type(tup1)) # <class tuple> 创建非空元组&#xff08;元组中只有一个元素&#xff0c;一般要在元素的后面加 , 若不加 , 该数据类型不一定是元组…

【Leetcode每日一题】 前缀和 - 寻找数组的中心下标(难度⭐)(28)

1. 题目解析 题目链接&#xff1a;724. 寻找数组的中心下标 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 核心在于计算题目所给数组是否存在某一个元素左边的和等于右边的和&#xff0c;存在返回那个元素下标即可&#xff0c;不…

#WEB前端(JS基础语法)

1.实验&#xff1a; 2.IDE&#xff1a;VSCODE 3.记录&#xff1a; &#xff08;1&#xff09;数据类型 var&#xff0c;let&#xff0c;const var,let声明变量&#xff0c;const声明常量。var声明的变量具有函数作用域,let声明的变量具有块级作用域&#xff0c;let跟安全更…

基于SSM的农业电商服务系统(农产品销售管理系统)(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的农业电商服务系统&#xff08;农产品销售管理系统&#xff09;&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#…

Golang pprof 分析程序的使用内存和执行时间

一、分析程序执行的内存情况 package mainimport ("os""runtime/pprof" )func main() {// ... 你的程序逻辑 ...// 将 HeapProfile 写入文件f, err : os.Create("heap.prof")if err ! nil {panic(err)}defer f.Close()pprof.WriteHeapProfile(f…

图像AI换脸软件:AI FaceSwap 中文版

AI FaceSwap 是一款利用人工智能技术进行面部交换的软件。该软件通过先进的人工智能算法&#xff0c;能够将一个人的面部表情、神态和特征准确地映射到另一个人身上&#xff0c;实现面部交换的效果。用户只需要提供两张照片&#xff0c;一张是目标人物的照片&#xff0c;另一张…

一维化01背包(详细)

http://t.csdnimg.cn/P7R3G 之前我们介绍了01背包&#xff0c;但是dp数组是二维化的&#xff0c;现在我们需要将其变成一维数组&#xff0c;如果已经对二维化的01背包十分了解了&#xff0c;那么理解一维化的dp数组也不是问题。 目录 分析 遍历顺序 原二维遍历 一维倒序遍…

GPT-4 及更高版本:大型语言模型的力量

GPT-4革命&#xff1a;人工智能如何重塑SEO行业 在人工智能领域&#xff0c;GPT-4 等语言模型的演变标志着一个重要的里程碑。 本文深入探讨了 GPT-4 的功能和潜力&#xff0c;同时也思考了人工智能领域的未来。 GPT-4 的出现&#xff1a;人工智能的新时代OpenAI 开发的 GPT-4…

Java引用强度

强引用 > 软引用 > 弱引用 > 虚引用 强引用&#xff1a;传统的创建Java对象的方式&#xff0c;如&#xff1a;Object obj new Object();任何情况下&#xff0c;只要存在强引用关系&#xff0c;垃圾回收器永远不会回收掉被引用的对象。 软引用&#xff1a;描述一些还…