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

深入理解 BOM：浏览器对象模型详解

news 来源：原创 2025/6/25 18:26:26

在前端开发的世界里，BOM（Browser Object Model，浏览器对象模型）是与浏览器窗口进行交互的重要工具。它提供了一组对象和方法，让开发者能够操作浏览器窗口、获取浏览器信息、控制页面 URL 等。接下来，我们就深入探究 BOM 的方方面面。​

1. 什么是 BOM​

BOM 即 Browser Object Model，也就是浏览器对象模型。它为开发者提供了一系列对象和方法，用于与浏览器窗口进行交互。不过，需要注意的是，BOM 并没有统一的标准规范，不同的浏览器在实现上可能存在细微差异。这就要求开发者在使用 BOM 时，充分考虑浏览器兼容性问题，以确保代码在各种浏览器中都能正常运行。​

2. BOM 的构成​

BOM 包含多个核心对象，这些对象各自承担着不同的职责，共同构成了与浏览器交互的接口。以下是一些常用的 BOM 核心对象：​

  • window：作为顶级对象，window 代表着浏览器窗口。在 JavaScript 中，所有的全局变量和函数都属于 window 对象，并且在调用 window 对象的属性和方法时，可以省略window.前缀。​
  • navigator：该对象包含了浏览器相关的信息，例如用户代理（用于标识浏览器类型和版本等信息）、运行平台等。通过navigator.userAgent，我们可以获取到用户代理字符串，从而判断用户使用的浏览器类型。
console.log(navigator.userAgent)

  • location：用于获取或设置当前页面的 URL。我们可以通过location.href获取当前页面的完整 URL，也可以使用location.href来实现页面跳转。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>location</title>
</head>
<body>
<button id="baidu">跳转百度</button>
<script>// 获取当前页面的地址console.log(location.href)let btn = document.getElementById('baidu')btn.onclick = function () {// 跳转带百度的首页location.href = 'https://www.baidu.com'}
</script>
</body>
</html>

运行结果： 

  • history：主要用于控制浏览器的历史记录。通过history.back()可以实现返回上一页的功能，history.forward()则可以实现前进到下一页的功能。​
// 返回上一页​
history.back();​
// 前进到下一页​
history.forward();​
  • screen：用于获取屏幕信息，比如屏幕分辨率。通过screen.width和screen.height可以分别获取屏幕的宽度和高度。​
console.log(`屏幕的宽度为：${screen.width},屏幕的高度为：${screen.height}`)

  • document：虽然document对象主要属于 DOM（文档对象模型），但它也是 window 对象的一部分，通过window.document可以访问到。document对象用于操作页面的文档结构，比如获取元素、创建元素等。

3. 顶级对象 window​

在 JavaScript 中，window 对象是 BOM 的核心。由于所有全局变量和函数都属于 window 对象，所以在调用 window 对象的属性和方法时，我们可以省略window.前缀。例如，console.log()方法实际上是window.console.log()的简写形式。

4. window 对象的常见事件​

4.1 页面（窗口）加载事件​

页面加载事件是开发中经常用到的事件，它主要有两种方式：

方式一：

window.onload：该事件会等待页面加载完成所有内容，包括标签、文本、属性、图片、音频、视频等之后才会执行回调函数。

语法：

window.onload = function(){函数的逻辑代码}

代码实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onload(页面所有内容加载完成)</title>
</head>
<body>
<p>我的图片</p>
<img src="images/zxy.png" width="200px">
<script>window.onload = function () {// 图片显示后才会弹出警告框alert('页面所有内容已经加载完成')}
</script>
</body>
</html>

运行结果： 

警示窗弹出的时候，图片已经加载出来了，因为window.onload事件会等待页面加载完成所有内容

方式二：

DOMContentLoaded：此事件监听 DOM 内容加载完成，它只针对标签、文本、属性等 DOM 结构的加载，不监听图片、音频、视频等外部资源的加载。

语法：

document.addEventListener('DOMContentLoaded', function () {​函数的逻辑代码});

代码实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onload(页面所有内容加载完成)</title>
</head>
<body>
<p>我的图片</p>
<img src="images/zxy.png" width="200px">
<script>document.addEventListener("DOMContentLoaded",function (){// 图片没有显示就弹出警告框alert('DOM内容加载完成')})
</script>
</body>
</html>

运行结果： 

图片没有加载出来，因为 DOMContentLoaded此事件监听 DOM 内容加载完成，它只针对标签、文本、属性等 DOM 结构的加载，不监听图片、音频、视频等外部资源的加载。

综合示例比较：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onload(页面所有内容加载完成)</title>
</head>
<body>
<p>我的图片</p>
<img src="images/zxy.png" width="200px">
<script>// window.onload：该事件会等待页面加载完成所有内容// DOMContentLoaded比window.onload 更早window.onload = function () {// 图片显示后才会弹出警告框alert('页面所有内容已经加载完成')}document.addEventListener("DOMContentLoaded",function (){// 图片没有显示就弹出警告框alert('DOM内容加载完成')})
</script>
</body>
</html>

先弹出“DOM内容加载完成”的警示窗口

然后再弹出“页面所有内容已经加载完成“的提示窗口

 4.2 调整窗口大小事件​

当浏览器窗口的大小发生变化时，window.onresize事件会被触发。我们可以利用这个事件来实现响应式布局等功能。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>调整窗口大小事件示例</title><style>div {width: 200px;height: 200px;background-color: lightblue;}</style>
</head>
<body><div id="box"></div><script>let box = document.getElementById('box');window.onresize = function () {box.style.width = window.innerWidth/2 + 'px';box.style.height = window.innerWidth/2 + 'px';}// window.addEventListener("resize", function () {//     box.style.width = window.innerWidth/2 + 'px';//     box.style.height = window.innerWidth/2 + 'px';// })</script>
</body></html>

拉动窗口始终保持盒子的宽和高都是窗口的一半。

5. 定时器

5.1 setTimeout () 炸弹定时器​

setTimeout()方法会在指定的毫秒数后执行一次回调函数，适用于延迟执行某个任务。该方法会返回一个定时器 ID，我们可以通过clearTimeout()方法来清除这个定时器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定时器setTimeout()</title>
</head>
<body><p>2秒后炸弹会爆炸，点击按钮阻止爆炸</p><button>阻止爆炸</button><script>// 语法：这个调用函数可以直接写函数，也可以写函数名// let 函数名 = setTimeout(调用函数, 毫秒数)// 清除定时器：clearTimeout(函数名)let bombTimer = setTimeout(function () {alert('炸弹爆炸了')}, 2000)let btn = document.querySelector('button')btn.onclick = function () {clearTimeout(bombTimer)alert('你点击了按钮，炸弹没有爆炸')}</script>
</body>
</html>

5.2 setInterval () 闹钟定时器​

setInterval()方法会每隔指定的毫秒数重复执行回调函数，适用于轮询、倒计时、动画等需要周期性执行的任务。同样，该方法也会返回一个定时器 ID，可以使用clearInterval()方法来停止定时器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>setInterval计时器</title>
</head>
<style>#box{width: 135px;height: 135px;background-color: #dddddd;}#box p{text-align: center;line-height: 135px;font-size: 50px;}
</style>
<body><div id="box"><p id="time">0</p></div><button id = "start">开始</button><button id = "stop">停止</button><button id = "zero">清零</button><script>let count = 0;const time = document.getElementById('time');const start = document.getElementById('start');const stop = document.getElementById('stop');const zero = document.getElementById('zero');// 将 timer 定义为全局变量let timer;// 语法：回调函数可以自己写，也可以写函数名// let 定时器id = setInterval(回调函数, 毫秒数)// 停止定时器：clearInterval(定时器id)start.addEventListener("click", function () {// 启动定时器并赋值给全局变量 timertimer = setInterval(function () {count++;time.innerHTML = count;}, 1000)})stop.addEventListener("click", function () {// 停止计时器if (timer) {clearInterval(timer);timer = null; // 清除引用，避免重复调用}})zero.addEventListener("click", function () {// 清零count = 0;time.innerHTML = count;})</script>
</body>
</html>

6. this 指向问题​

在 JavaScript 中，this的指向是一个非常重要且容易混淆的概念，不同的调用方式下this的指向有所不同：​

  • 普通函数调用：在非严格模式下，普通函数调用时this指向window对
function normalFunction() {​console.log(this);​
}
  • 方法调用：当函数作为对象的方法被调用时，this指向调用该方法的对象。
var person = {name: "Alice",sayName: function () {console.log(this.name);}
};
person.sayName(); // 输出Alice
  • 构造函数调用：使用构造函数创建对象实例时，this指向新创建的对象实例。
function Person(name) {this.name = name;
}
var alice = new Person("Alice");
console.log(alice.name); // 输出Alice
  • 箭头函数：箭头函数不绑定自己的this，它会继承外层作用域中的this。
var person = {name: "Bob",sayHello: () => {console.log(this.name);}
};
person.sayHello(); // 输出undefined，因为箭头函数中的this继承自全局作用域
  • 事件回调：在事件回调函数中，this指向触发事件的 DOM 元素（浏览器会自动绑定）。
var person = {name: "Bob",sayHello: () => {console.log(this.name);}
};
person.sayHello(); // 输出undefined，因为箭头函数中的this继承自全局作用域

通过以上对 BOM 的详细介绍和示例，相信大家对浏览器对象模型有了更深入的理解。在实际前端开发中，熟练运用 BOM 的各种对象和方法，能够帮助我们实现更多强大且丰富的功能。​

以上博客涵盖了 BOM 各方面知识与应用。若你觉得某些部分需更详细说明，或有其他修改需求，欢迎随时告知。

相关文章：

  • 小程序自己做网站自己做网站需要什么条件
  • 网站运营经理新东方教育培训机构官网
  • 电子商务网站整体策划百度登录入口
  • 网站文章更新怎么做百度网站下拉排名
  • 临沂做网站推广的公司有爱站网关键词工具
  • 站长工具网站备案查询企业培训课程表
  • RabbitMQ是什么?以及优缺点
  • Kafka 监控与调优实战指南（一）
  • 通过Prompt提示构建思维链
  • FSMC控制LCD(TFTLCD：Z350IT002)显示案例
  • OpenAI-Kotlin文档详解
  • 基于目标驱动的分布式敏捷开发
  • 顺序表整理和单项链表01 day20
  • 华为云Flexus+DeepSeek征文 | 基于华为云的 Dify-LLM 企业级 AI 开发平台部署指南
  • AI 产品部署和交付的基础设施——全景解析
  • 【Linux手册】环境变量与命令行参数：贯穿系统与应用的隐形桥梁
  • 09.【C语言学习笔记】指针（一）
  • Spring Ai Alibaba Graph实现五大工作流模式
  • 马克思主义基本原理期末复习下
  • Tomcat服务
  • 60天python训练营打卡day41
  • # Python中等于号的使用
  • 创建首个 Spring Boot 登录项目
  • VSCode源码解析-程序的启动逻辑
  • 彻底拆解 Vue scoped 指令：从编译原理到工程实践的全链路解析
  • 【Spring底层分析】AOP的cligb代理和jdk代理