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

JavaScript 中 BOM 基础知识有哪些？

news 2026/1/9 14:03:53

浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 的组成部分之一，BOM 赋予了 JavaScript 程序与浏览器交互的能力。

window 对象是 BOM 的核心，用来表示当前浏览器窗口，其中提供了一系列用来操作或访问浏览器的方法和属性。

另外，JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象，甚至我们前面介绍的 document 对象也属于 window 对象。

注意：如果 HTML 文档中包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象的同时，为每个框架创建一个额外的 window 对象。

window 对象中的属性

下表中列举了 window 对象中提供的属性及其描述：

属性描述
closed返回窗口是否已被关闭
defaultStatus设置或返回窗口状态栏中的默认文本
document对 Document 对象的只读引用
frames返回窗口中所有已经命名的框架集合，集合由 Window 对象组成，每个 Window 对象在窗口中含有一个 <frame> 或 <iframe> 标签
history对 History 对象的只读引用，该对象中包含了用户在浏览器中访问过的 URL
innerHeight返回浏览器窗口的高度，不包含工具栏与滚动条
innerWidth返回浏览器窗口的宽度，不包含工具栏与滚动条
localStorage在浏览器中以键值对的形式保存某些数据，保存的数据没有过期时间，会永久保存在浏览器中，直至手动删除
length返回当前窗口中 <iframe> 框架的数量
location引用窗口或框架的 Location 对象，该对象中包含当前 URL 的有关信息
name设置或返回窗口的名称
navigator对 Navigator 对象的只读引用，该对象中包含当前浏览器的有关信息
opener返回对创建此窗口的 window 对象的引用
outerHeight返回浏览器窗口的完整高度，包含工具栏与滚动条
outerWidth返回浏览器窗口的完整宽度，包含工具栏与滚动条
pageXOffset设置或返回当前页面相对于浏览器窗口左上角沿水平方向滚动的距离
pageYOffset设置或返回当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离
parent返回父窗口
screen对 Screen 对象的只读引用，该对象中包含计算机屏幕的相关信息
screenLeft返回浏览器窗口相对于计算机屏幕的 X 坐标
screenTop返回浏览器窗口相对于计算机屏幕的 Y 坐标
screenX返回浏览器窗口相对于计算机屏幕的 X 坐标
sessionStorage在浏览器中以键值对的形式存储一些数据，数据会在关闭浏览器窗口或标签页之后删除
screenY返回浏览器窗口相对于计算机屏幕的 Y 坐标
self返回对 window 对象的引用
status设置窗口状态栏的文本
top返回最顶层的父窗口

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><script type="text/javascript">window.defaultStatus = "JavaScript"document.write(window.defaultStatus + "<br>");    // 输出：JavaScriptdocument.write(window.innerHeight + "<br>");      // 输出：314document.write(window.innerWidth + "<br>");       // 输出：539document.write(window.length + "<br>");           // 输出：0document.write(window.location + "<br>");         // 输出：file:///F:/code/index.htmldocument.write(window.opener + "<br>");           // 输出：nulldocument.write(window.outerHeight + "<br>");      // 输出：558document.write(window.outerWidth + "<br>");       // 输出：555document.write(window.parent + "<br>");           // 输出：[object Window]document.write(window.screenLeft + "<br>");       // 输出：2263document.write(window.screenTop + "<br>");        // 输出：401document.write(window.screenX + "<br>");          // 输出：2263document.write(window.screenY + "<br>");          // 输出：401</script>
</body>
</html>

window 对象中的方法

下表中列举了 window 对象中提供的方法及其描述：

方法描述
alert()在浏览器窗口中弹出一个提示框，提示框中有一个确认按钮
atob()解码一个 base-64 编码的字符串
btoa()创建一个 base-64 编码的字符串
blur()把键盘焦点从顶层窗口移开
clearInterval()取消由 setInterval() 方法设置的定时器
clearTimeout()取消由 setTimeout() 方法设置的定时器
close()关闭某个浏览器窗口
confirm()在浏览器中弹出一个对话框，对话框带有一个确认按钮和一个取消按钮
createPopup()创建一个弹出窗口，注意：只有 IE 浏览器支持该方法
focus()使一个窗口获得焦点
getSelection()返回一个 Selection 对象，对象中包含用户选中的文本或光标当前的位置
getComputedStyle()获取指定元素的 CSS 样式
matchMedia()返回一个 MediaQueryList 对象，表示指定的媒体查询解析后的结果
moveBy()将浏览器窗口移动指定的像素
moveTo()将浏览器窗口移动到一个指定的坐标
open()打开一个新的浏览器窗口或查找一个已命名的窗口
print()打印当前窗口的内容
prompt()显示一个可供用户输入的对话框
resizeBy()按照指定的像素调整窗口的大小，即将窗口的尺寸增加或减少指定的像素
resizeTo()将窗口的大小调整到指定的宽度和高度
scroll()已废弃。您可以使用 scrollTo() 方法来替代
scrollBy()将窗口的内容滚动指定的像素
scrollTo()将窗口的内容滚动到指定的坐标
setInterval()创建一个定时器，按照指定的时长（以毫秒计）来不断调用指定的函数或表达式
setTimeout()创建一个定时器，在经过指定的时长（以毫秒计）后调用指定函数或表达式，只执行一次
stop()停止页面载入
postMessage()安全地实现跨源通信

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><p id="show_tag">此处显示点击按钮的效果</p><button onclick="myBtoa()">btoa()</button><button onclick="myAtob()">atob()</button><button onclick="myAlert()">alert()</button><button onclick="myConfirm()">confirm()</button><button onclick="myOpen()">open()</button><button onclick="myMoveBy()">moveBy()</button><button onclick="myMoveTo()">moveTo()</button><button onclick="myPrint()">print()</button><button onclick="myPrompt()">prompt()</button><button onclick="myResizeBy()">resizeBy()</button><button onclick="myClose()">close()</button><script type="text/javascript">var ptag = document.getElementById('show_tag');var str;function myBtoa(){str = btoa("JavaScript");ptag.innerHTML = str;}function myAtob(){ptag.innerHTML = typeof str;if(str == undefined){ptag.innerHTML = "请先点击 btoa() 按钮";return;}ptag.innerHTML = atob(str);}function myAlert(){alert("这是一个提示框！");}function myConfirm(){var x;var r = confirm("按下按钮!");if (r == true){x = "你按下了\"确定\"按钮!";}else{x = "你按下了\"取消\"按钮!";}ptag.innerHTML = x;}var myWin;function myOpen(){if(myWin == undefined || (myWin != undefined && myWin.closed == true)){myWin = window.open('', '', 'width=200,height=100');}else{return;}}function myMoveBy(){if(myWin == undefined || myWin.closed == true) myOpen();myWin.moveBy(200, 200);}function myMoveTo(){if(myWin == undefined || myWin.closed == true) myOpen();myWin.moveTo(0, 0);}function myPrint(){print();}function myPrompt(){var name = prompt("请输入你的名字。")if (name != null && name != ""){ptag.innerHTML = "你好 " + name  + "! 今天感觉如何?";} else {ptag.innerHTML = "你没有输入任何内容";}}function myResizeBy(){if(myWin == undefined || myWin.closed == true) myOpen();myWin.resizeBy(100, 100);}function myClose(){if(myWin == undefined) return;if(myWin != undefined && myWin.closed == false) myWin.close();}</script>
</body>
</html>

运行结果如下图所示，点击页面中的按钮即可实现相应功能。

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

相关文章：

JavaScript 中 BOM 基础知识有哪些？

浏览器对象模型&#xff08;Browser Object Model&#xff0c;简称 BOM&#xff09;是 JavaScript 的组成部分之一&#xff0c;BOM 赋予了 JavaScript 程序与浏览器交互的能力。 window 对象是 BOM 的核心&#xff0c;用来表示当前浏览器窗口&#xff0c;其中提供了一系列用来…...

编程日记 2023/10/27 11:03:23

【PointNet—论文笔记分享】

第一个直接基于原始点云数据进行分割、分类的模型&#xff0c;之前都是基于多视图或者体素的方式。 论文: PointNet: Deep Learning on Point Sets for 3D Classification and Segmentation代码: TensorFlow版 Pytorch版 基本模型架构&#xff1a; 分别对每个点进行特征提取…...

编程日记 2023/10/27 11:02:22

Mysql8.1.0 windows 绿色版安装

Mysql8.1.0 windows 绿色版安装 目录 Mysql8.1.0 windows 绿色版安装1、下载mysql8.1.0_windows&#xff08;mysql-8.1.0-winx64.zip&#xff09;2、解压到安装目录3、添加环境变量4、新建mysql配置文件5、安装mysql服务6、初始化数据文件7、启动mysql服务8、进入mysql管理模式…...

编程日记 2023/10/27 11:01:21

何为自制力？如何提高自制力？

什么是自制力&#xff1f; 自制力也即是自我控制能力&#xff0c;是一个人如何去抵御外部诱惑力&#xff0c;从而坚持自己的原本计划&#xff0c;坚定去完成目标。除了外部诱惑力&#xff0c;也可以指的是面对困境&#xff0c;不良情绪等外部因素。 自制力是自我管理能力的体…...

编程日记 2023/10/27 11:00:20

第1篇 目标检测概述 —（3）目标检测评价指标

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。目标检测评价指标是用来衡量目标检测算法性能的指标&#xff0c;主要包括几个指标&#xff1a;精确率&#xff08;Precision&#xff09;、召回率&#xff08;Recall&#xff09;、交并比&#xff08;IoU&#xff09;、平均…...

编程日记 2023/10/27 10:59:19

剑指JUC原理-3.线程常用方法及状态

常用方法 start和run 调用run public static void main(String[] args) {Thread t1 new Thread("t1") {Overridepublic void run() {log.debug(Thread.currentThread().getName());FileReader.read(Constants.MP4_FULL_PATH);}};t1.run();log.debug("do othe…...

编程日记 2023/10/27 10:58:17

MYSQL8-sql语句使用集合。MYCAT-sql语法使用集合

MYSQL 1.MYSQL事务与锁问题处理 SELECT * FROM information_schema.INNODB_LOCKs; -- 查询锁select * from information_schema.INNODB_LOCK_WAITS; -- 查询等待锁SELECT * FROM information_schema.INNODB_TRX; -- 查询事务select * from information_schema.processlist wh…...

编程日记 2023/10/27 10:57:16

UNIX 域协议(本地通信协议)

概述 Unix 域协议并不是一个实际的协议族&#xff0c;而是在单个主机上执行客户/服务通信的一种方式。是进程间通信&#xff08;IPC&#xff09;的一种方式。 它提供了两类套接字&#xff1a;字节流套接字 SOCK_STREAM&#xff08;有点像 TCP&#xff09;和数据报套接字 SOCK_…...

编程日记 2023/10/27 10:56:15

分类预测 | MATLAB实现SSA-CNN-BiGRU-Attention数据分类预测（SE注意力机制）

分类预测 | MATLAB实现SSA-CNN-BiGRU-Attention数据分类预测&#xff08;SE注意力机制&#xff09; 目录 分类预测 | MATLAB实现SSA-CNN-BiGRU-Attention数据分类预测&#xff08;SE注意力机制&#xff09;分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.MATLA…...

编程日记 2023/10/27 10:55:14

基于FPGA的图像PSNR质量评估计算实现,包含testbench和MATLAB辅助验证程序

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 设置较大的干扰&#xff0c;PSNR15。 设置较小的干扰&#xff0c;PSNR25。 2.算法运行软件版本 matlab2022a vivado2019.2 3.部分核心程序 ti…...

编程日记 2023/10/27 10:54:13

算法进修Day-38

算法进修Day-38 77. 组合 难度&#xff1a;中等 题目要求&#xff1a; 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 示例1 输入&#xff1a;n 4, k 2 输出&#xff1a; [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 示例2 输入&#…...

编程日记 2023/10/27 10:52:09

8.MySQL内外连接

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 表的内连和外连 内连接 外连接 左外连接 右外连接 我们进行演示的表结构是这样的&#xff1a; 表的内连和外连 内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选&#xff0c;我们前面学习的…...

编程日记 2023/10/27 10:51:07

使用.NET设计一个Epub电子书生成工具

1. 背景 可能我们接触到更多的小说文件都是普普通通的TXT格式&#xff0c;用于分享的文档更多的是PDF。TXT虽然轻巧&#xff0c;但是不如PDF丰富和强大。而 Epub 电子书格式因为其丰富的展示效果和较小的文件大小&#xff0c;这样一个微妙的平衡就刚刚好。作为一个喜欢看小说的…...

编程日记 2023/10/27 10:49:05

2023-10-26 用C语言实现一个大整数加法

点击 <C 语言编程核心突破> 快速C语言入门 用C语言实现一个大整数加法 前言一、思路和代码设计数字对齐:字符对齐: 二、代码总结 前言 要解决问题: 实现大整数加法 想到的思路: 用字符代替数字, 逐个计算, 过10进位. 其它的补充: 同样思路可以解决减法, 乘法, 但除法…...

编程日记 2023/10/27 10:48:04

[hive] 窗口函数 ROW_NUMBER()

文章目录 ROW_NUMBER() 示例窗口函数 ROW_NUMBER() 在 Hive SQL 中&#xff0c;ROW_NUMBER()是一个用于生成行号的窗口函数。 它可以为查询结果集中的每一行分配一个唯一的行号。 以下是 ROW_NUMBER() 函数的基本语法&#xff1a; ROW_NUMBER() OVER (PARTITION BY column…...

编程日记 2023/10/27 10:47:03

TensorFlow和Pytorch两种机器学习框架的比较及优缺点

TensorFlow是一个开源的机器学习框架&#xff0c;由Google开发并发布&#xff0c;它被用来构建各种类型的机器学习模型&#xff0c;例如图像识别、语音识别、自然语言处理等。TensorFlow主要有以下几个基本概念&#xff1a; Tensor&#xff1a;TensorFlow中最基本的数据结构&am…...

编程日记 2023/10/27 10:46:02

“Can‘t open workbook - unsupported file type: XML“

java开发&#xff0c;增删改查&#xff0c;涉及到导入excel时&#xff0c;有的excel导入失败提示"Cant open workbook - unsupported file type: XML"。着急赶工期&#xff0c;告诉客户先把excel另存为xls格式&#xff0c;再重新导入。现在有点空余时间&#xff0c;好…...

编程日记 2023/10/27 10:45:00

达芬奇MacOS最新中文版 DaVinci Resolve Studio 18中文注册秘钥

DaVinci Resolve Studio 18是一款专业的视频编辑软件&#xff0c;它具有多种强大的功能。首先&#xff0c;它提供了丰富的视频剪辑工具&#xff0c;如剪切、复制、粘贴、剪辑、缩放和移动等&#xff0c;使用户可以轻松地剪辑和组合视频素材。其次&#xff0c;该软件还支持多个轨…...

编程日记 2023/10/27 10:43:59

电脑扬声器未插入？4个方法帮你恢复声音！

“太奇怪了吧&#xff0c;我的电脑扬声器一直显示未插入&#xff0c;我使用电脑的时候也是一直都没有声音。这是为什么呢&#xff1f;我应该怎么解决这个问题呀&#xff1f;” 我们使用电脑播放音频或视频时&#xff0c;都需要用到电脑扬声器。如果扬声器无法播放声音&#xff…...

编程日记 2023/10/27 10:42:57

Python - 通过/SSH 获取远程主机的 env 变量

Python - 通过/SSH 使用远程主机的 env 变量 - IT工具网 (coder.work) ssh.exec_command(. .profile ; cd /home/test/;$run ./test.sh)ssh.exec_command(. .profile ; cd /home/test/;echo $run )...

编程日记 2023/10/27 10:41:55

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/6 15:30:00

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/12/19 10:26:07

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/6 15:32:05

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2026/1/3 21:25:07

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2026/1/6 2:33:33

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2026/1/3 20:07:08