BOM模型

二哈喇子！2026-01-23 23:59

文章目录

  • 前言
  • window对象常用方法
    • [alert 警告框](#alert 警告框)
    • [open 与 close](#open 与 close)
    • [confirm 对话框](#confirm 对话框)
    • [setTimeout 定时器](#setTimeout 定时器)
    • [setInterval 定时器（重复执行）](#setInterval 定时器（重复执行）)
  • [location 地址栏对象](#location 地址栏对象)
  • [history 对象](#history 对象)

前言

提示：这里可以添加本文要记录的大概内容：

BOM（Browser Object Model）是指浏览器对象模型，在 JavaScript 中通过 BOM 可以操作浏览器及其窗口

BOM 对象是由浏览器厂商提供的，因此在不同的浏览器中可能存在差异性

提示：以下是本篇文章正文内容，下面案例可供参考

window对象常用方法

三部曲：

  1. 事件
  2. 函数
  3. 函数调用

alert 警告框

window对象的alert方法用于在浏览器中弹出一个警告框，通常用于给用户展示一些信息或提示。

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
                <!-- 3、函数调用 -->
    <button onclick="f1()">alert</button>
    <!-- 1、事件onclick --> 
</body>
<!--三部曲---------------1事件、2函数、3函数调用 -->
<script>
    // 2、函数
    function f1(){
        window.alert('断电了，上什么晚自习')
    }
</script>
</html>

上面代码中的三部曲分别是：

  1. 事件：<button onclick=" ">alert</button>
  2. 函数： function f1(){
    window.alert('断电了，上什么晚自习')
    }
  3. 函数调用：<button onclick="f1()">alert</button>

输出结果：

【解释】

上述代码是一个HTML文件，包括了一个button元素和一个script标签，使用三步骤实现了点击按钮后弹出警告框的效果。

1、在button元素中设置事件onclick，指定点击按钮后执行的操作。

2、在script标签中定义一个名为f1的函数，该函数的作用是在浏览器中弹出一个警告框。

3、将函数f1作为onclick事件的处理函数，指示点击按钮时执行f1函数。

当用户单击button按钮时，会触发onclick事件，该事件执行f1函数，从而调用window.alert方法弹出一个警告框。警告框显示的文本是"断电了，上什么晚自习"。

触发时间

  1. 前端界面发生变化，是因用户使用时进行一些操作，从而触发了相关前端的事件
  2. 事件是标记中以on开头的属性体现的
  3. 具体变化的功能代码需要编写对应的js函数
  4. on事件名="函数调用"

open 与 close

open按钮： 打开一个新窗口
close按钮： 关闭刚才打开的新窗口

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button onclick="f1()">open按钮</button>
    <button onclick="f2()">close按钮</button>  
</body>
<script>
    function f1(){
        window.open('https://blog.csdn.net/rej177')
    }

    function f2(){
        window.close()
        if (window.confirm('真的要残忍离开吗')) {
            window.close()
        }
    }
</script>
</html>

输出结果：

当用户单击打开按钮时，会触发onclick事件，该事件执行f1函数，从而调用window.open方法在新窗口中打开指定网址。

指定的网址是"https://blog.csdn.net/rej177"。

当用户单击关闭按钮时，会触发onclick事件，该事件执行f2函数，从而调用window.close方法在窗口中关闭指定网址。

【解释：】

上面的代码定义了两个按钮，一个用于打开新窗口，一个用于关闭当前窗口。

1、当用户点击"open按钮"时，会触发f1()函数。

该函数中使用window.open()方法打开一个新的窗口，URL为 https://blog.csdn.net/rej177，其他参数使用默认值。

2、当用户点击"close按钮"时，会触发f2()函数。

该函数中使用window.close()方法关闭当前窗口

需要注意的是，如果窗口是由用户手动打开的，则无法使用该方法关闭窗口。

此外为了避免误操作，一般建议在使用close()方法关闭窗口之前先弹出确认框，让用户确认是否真的要离开。上面通过window.confirm()方法弹出一个确认框，提示用户是否真的要关闭窗口。

如果用户点击确认，则调用window.close()方法，关闭当前窗口。

confirm 对话框

通常情况下可以使用该方法提示用户进行某种操作，然后根据用户的选择来做出相应的操作。

如果用户点击OK按钮，则该方法返回true，否则返回false。

javascript 复制代码 
<!DOCTYPE html>
<html>
<head>
	<title>Confirm示例</title>
	<meta charset="utf-8">
</head>
<body>
	<button onclick="myFunction()">点我转到百度页面</button>
	<script>
		function myFunction() {
			if (window.confirm("确认要离开当前页面吗？")) {
				// 如果用户点击了OK按钮
				window.location.href = "http://www.baidu.com";
			}
		}
	</script>
</body>
</html>

输出结果：

在这个示例中定义了一个按钮，绑定了myFunction()函数。

当用户点击按钮时，会触发该函数，函数中会先使用window.confirm()方法弹出一个对话框，询问用户是否要离开当前页面。

如果用户点击OK按钮，则会执行window.location.href赋值语句，将当前页面重定向到百度网站。

注意：由于该方法是window对象的方法，因此可以省略window.。即可以写成confirm()

setTimeout 定时器

定时器常用在网页跳转（3秒后网页自动跳转）

还有像穿越火线游戏中爆破模式上面的计时

【示例代码】

javascript 复制代码 
<!DOCTYPE html>
<html>
<head>
	<title>Confirm示例</title>
	<meta charset="utf-8">
</head>
<body>
	<button onclick="f1()">setTimeout</button>
	<script>
		function f1() {	
	    	window.setTimeout(() => {
                window.alert('Bom！潜伏者赢了！')
            },3000)
		}
	</script>
</body>
</html>

输出结果：
f1()函数中，使用window.setTimeout()方法，表示在3秒钟后执行一个匿名函数，该匿名函数的功能是弹出一个提示框（1秒=1000毫秒）

setInterval 定时器（重复执行）

setInterval()也是JavaScript中一种定时器方式

和setTimeout()类似，setInterval()可以按照指定的时间间隔重复执行一个指定的代码段

可以理解为自动刷新

【示例代码】

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setInterval示例</title>
</head>
<body>
    <button onclick="f1()">间隔定时器</button>
    <script>
        function f1() {
            window.setInterval(() => {
                let d = new Date()
                console.log(d);
            },1000) 
        }
    </script>
</body>
</html>

输出结果：

这段代码为一个简单的 HTML 页面，其中包含了一个按钮，点击按钮会触发 f1() 方法的执行。
f1() 方法会调用 window.setInterval() 方法，该方法可以重复执行指定的代码，第一个参数是一个回调函数，该函数会在每隔一定时间（这里是 1000 毫秒，即 1 秒）执行一次。

在这个例子中，回调函数获取当前时间并将其打印到控制台中。

这样每隔 1 秒就会在控制台中输出一次当前时间。

location 地址栏对象

BOM（浏览器对象模型）中的 location 对象提供了有关当前窗口中加载文档的信息，包括当前 URL 地址和一些方法，可以通过 location 对象实现 URL 的重定向、刷新页面等操作。

location 对象有以下常用属性：

  • hash：返回 URL 中的锚部分（即 # 号后面的部分）。
  • host：返回 URL 的主机名和端口号。
  • href：返回当前文档的完整 URL。
  • reload()：重新加载当前文档。
  • protocol：返回 URL 的协议部分，例如 http 或 https。
  • search：返回 URL 的查询部分（即 ? 号后面的部分）。

location 对象还提供了以下常用方法：

  • assign(url)：加载一个新文档，并用新的 URL 替换当前文档。相当于点击链接或在地址栏输入新的 URL。
  • replace(url)：加载一个新文档，并用新的 URL 替换当前文档。与 assign() 方法不同的是，调用 replace() 方法后，用户无法通过"后退"按钮返回到前一个页面。

需要注意的是，在 JavaScript 中修改 location 属性，或调用 assign()、replace() 方法等，都会导致页面的跳转，如果不希望页面跳转，可以通过 location.hash 属性修改 URL 中的锚部分，从而实现局部更新页面的效果。

【示例代码】

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- button[onclick]*2 公式生成 -->
    <button onclick="f1()">点我刷新</button>
    <button onclick="f2()">点我跳转</button>
</body>
<script>
    function f1() {
        location.reload()
    }
    function f2() {
        location.href = 'https://www.bilibili.com'
    }
</script>
</html>

输出效果：

这段代码使用HTML和JavaScript创建了两个按钮，一个按钮用来刷新当前页面，另一个按钮用来跳转到Bilibili网站。

其中HTML的button标签和onclick事件用来定义按钮和按钮点击时触发的函数，JavaScript的location对象用来操作浏览器的URL。

当点击刷新按钮时，调用f1()函数，该函数内部调用location.reload()方法来刷新当前页面；

当点击跳转按钮时，调用f2()函数，该函数内部通过location.href属性将浏览器的URL跳转到Bilibili网站。

history 对象

BOM模型中的history对象是一个用于访问浏览器窗口历史记录的JavaScript对象。通过history对象，可以访问浏览器窗口中的前进和后退按钮，以及浏览器窗口中的当前网页的历史记录。

history对象提供了一组方法，可以用来管理浏览器窗口的历史记录。这些方法包括：

  • back()：返回到上一个历史记录。
  • forward()：前往下一个历史记录。
  • go(n)：前往指定的历史记录索引。
  • pushState(state, title, url)：向浏览器的历史记录中添加一条新的记录。
  • replaceState(state, title, url)：替换当前历史记录中的最后一条记录。

【示例代码】

这个页面包含一个按钮和一个H1标题。当用户点击按钮时，goH2()函数会被调用，它使用location.href属性将页面跳转到命名为"跳转页面"的HTML文件。

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
		body {
			background-color: yellowgreen;
		}
	</style>
</head>
<body>
    <h1>葫芦娃救爷爷</h1>
    <button onclick="goH2()">跳转</button>
</body>
<script>
    function goH2(){
        location.href = './跳转页面.html'
    }
</script>
</html>

这个页面与第一个页面相似，也包含一个按钮和H1标题。

当用户点击按钮时，backToH1()函数会被调用，它使用history.go(-1)啊属性将用户带回上一页。

两个页面都包含样式代码，实现了不同的背景颜色

当用户在第一个页面点击按钮跳转到第二个页面时，用户将看到不同的背景颜色与内容。

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
		body {
			background-color: gold;
		}
	</style>
</head>
<body>
    <h1>一个比一个能送</h1>
    <button onclick="backToH1()">回退</button>
</body>
<script>
    function backToH1(){
        history.go(-1)
    }
</script>
</html>

输出结果：

相关推荐
二哈喇子！1 小时前
Vue2 监听器 watcher
前端·javascript·vue.js
二哈喇子！2 小时前
空指针异常
开发语言
咚为2 小时前
Rust Print 终极指南：从底层原理到全场景实战
开发语言·后端·rust
%xiao Q2 小时前
GESP C++五级-202406
android·开发语言·c++
Psycho_MrZhang2 小时前
Neo4j Python SDK手册
开发语言·python·neo4j
yanyu-yaya2 小时前
前端面试题
前端·面试·前端框架
Traced back2 小时前
# C# + SQL Server 实现自动清理功能的完整方案：按数量与按日期双模式
开发语言·c#
sin22012 小时前
MyBatis的执行流程
java·开发语言·mybatis
web3.08889992 小时前
1688图片搜索API，相似商品精准推荐
开发语言·python
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03Claude Code Skills 实用使用手册04UV安装并设置国内源05在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）06BongoCat - 跨平台键盘猫动画工具07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南09Linux下V2Ray安装配置指南10Open Code教程（四）| 高级配置与集成