Web API之BOM

最新推荐文章于 2026-01-08 16:54:07 发布
原创 最新推荐文章于 2026-01-08 16:54:07 发布 · 391 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #html

本文详细介绍了BOM中的window对象及其常见事件，如窗口加载和调整事件；探讨了定时器的使用，包括setTimeout和setInterval，以及this指向问题。此外，还涵盖了JS执行机制、location对象的属性和方法，以及navigator和history对象在浏览器环境中的应用。

BOM

简介：
BOM是浏览器对象模型，缺乏标准，兼容性较差
全局作用域中的变量和函数会变成window对象的属性和方法
一个特殊属性window.name
在这里插入图片描述
在这里插入图片描述

一、window的常见事件

1.窗口加载事件

可以不考虑上下位置顺序问题
在这里插入图片描述
在这里插入图片描述

2. 调节窗口大小事件

window.innerWidth可获得当前屏幕宽度
在这里插入图片描述

二、定时器

单位ms

1.setTimeout( , )

在这里插入图片描述
在这里插入图片描述
例子、5S后自动关闭广告

在这里插入图片描述
清除setTimeout()定时器
clearTimeout（）
在这里插入图片描述

2.setInterval()

在这里插入图片描述

例子、京东倒计时
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
清除setInterval()定时器
clearInterval()
在这里插入图片描述

3.发送短信例子

在这里插入图片描述
在这里插入图片描述

4.this指向问题

在这里插入图片描述

三、js执行机制

js本来是单线程，但是效率慢
HTML5提出Web Worker标准，js出现了同步和异步
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、location对象

URL是地址
在这里插入图片描述

1.常见属性

herf是整个URL
search是键值对
在这里插入图片描述

2.例子、

1.5s后跳转页面
在这里插入图片描述
2.获取URL参数
数据在不同页面的相互传递
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

3.常见方法

在这里插入图片描述

五、navigator对象

判断移动端还是pc端，实现跳转
在这里插入图片描述

六、history对象

OA办公系统中常见
与浏览器历史记录进行交互
在这里插入图片描述

WebAPI 之 BOM
chengyu0726的博客
05-10 439
BOM（Browser Object Model）：浏览器对象模型，核心对象window。 API（Application Programming Interface）：应用程序编程，提供函数库。 Web API：是浏览器提供的一套浏览器功能（BOM）和页面元素（DOM）的API。 window包含下列对象：document,location,navagation,screen,history 1，window对象 window是JS访问浏览器窗口的一个接口，并且是一个全局对象，定义在全局作用域
JS学习第5天——Web API之BOM（BOM构成、window对象常见属性、定时器、JS执行机制、location对象、navigator对象、history对象）
背心的博客
02-27 707
Web API（BOM）【BOM构成、window对象常见属性、定时器、JS执行机制、location对象、navigator对象、history对象
Web API —— BOM 学习（完结）
qq_63342197的博客
03-24 1371
BOM 是浏览器对象模型，是整个浏览器，也可以说 BOM 里面包含 DOM主要对最大的对象 Window 对象操作window 对象是一个全局对象，也可以说 是 JavaScript 里面的顶级对象document 是 window 里面的 document = window.document以前的很多语法全称应该是下面这样的ps：通过 var 定义的变量、函数最后都会变成 window 的属性和方法window 的对象和函数在调用是可以省略前面的 window
WebAPI之BOM操作和JS执行机制
qq_43537721的博客
05-26 432
WebAPI之BOM操作和JS执行机制。
WebAPI学习之BOM操作
weixin_46792892的博客
02-20 231
WebAPI学习之BOM 什么是BOM？（了解） BOM（Browser Object MOdel）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。 BOM和DOM的对比（了解） DOM 文档对象模型 DOM就是把文档当做一个对象来看待 DOM的顶级对象是document DOM主要学习的是操作元素 DOM是W3C标准规范 BOM 浏览器对象模型 把浏览器当做一个对象来看待 BOM的顶级对象是window BOM学习的是浏览器窗口交互的一些对象 BOM是浏览器厂
WebAPI之DOM，BOM基础
qq_36392801的博客
02-16 605
Web API 相关 概念：API 是一些预先定义的函数，目的是提供应用程序给开发人员，以获得操作软件或硬件的能力，不需要看源码，只需要直到输入什么，输出什么。 任何语言都有自己的 API API 特征：输入，输出 Web API 主要是 DOM 和 BOM DOM 相关 概念：文档对象模型，是W3C推荐的处理可扩展标记语言的标准接口。是一种与平台和语言无关的程序接口，可以动态的访问程序和脚本，更新其内容，结构； DOM 是一种基于数的 API 文档，它要求整个文档都表示在存储器中。 DOM 树 文档
【前端学习笔记】Web API——BOM与DOM
qq_46056318的博客
11-25 1601
DOM定义了节点和对象的属性、方法，这些属性、方法可以动态地更新页面内容，响应用户的交互。在这种做法中，当我们想在用户与大量的子元素中的任何一个互动时运行一些代码时，我们在它们的父元素上设置事件监听器，让发生在它们身上的事件冒泡到它们的父元素上，而不必在每个子元素上单独设置事件监听器。window 代表浏览器的一个窗口或标签页，提供了控制浏览器窗口的方法和属性，是浏览器中最顶层的对象，同时也是全局对象，所以在全局作用域中声明的所有变量和函数都成为了 window 对象的属性。BOM：浏览器对象模型。
WebAPI之DOM和BOM
weixin_30301449的博客
04-16 906
API是什么？ Application Programming Interface：应用程序编程接口，是一些预先定义的函数，通俗的理解就是一些方法。 WebAPI是什么？ 浏览器提供的一套操作浏览器功能和页面元素的API。 此处的Web API特指浏览器提供的一些方法。可分为两个部分：BOM(浏览器对象模型)、DOM（页面对象模型） DOM DOM的概念 文档对象模型（Documen...
WebAPI—BOM04
qq_43599049的博客
03-14 183
BOM：浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列对象组成，并且每个对象都提供了很多方法与属性。 BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。 ...
web API- BOM.pdf
10-17
在Web开发中，BOM（Browser Object Model）是Web API的重要组成部分，它提供了对浏览器环境的访问，允许开发者操控页面的各个部分。下面将详细讨论BOM中的关键概念和常用方法。 ### 1. `setTimeout` 和 `...
k3cloud，webapi+python
03-26
python通过webapi向k3cloud导入或操作基础资料及单据 里面的注释是可以去掉，然后运行的
webapi、bom、dom的区别
05-09
### Web API、BOM 和 DOM 的区别 #### 定义与范围 Web API 是指一系列由浏览器提供的接口集合，允许开发者通过编程方式与浏览器环境进行交互。它的范畴非常广泛，涵盖了从页面操作到网络请求的各种功能[^3]。具体而...
前端组件级权限控制
马优晨
01-06 338
前端组件级权限控制通过统一管理权限数据，采用声明式或编程式方式在组件层面进行校验。核心方案包括：1）指令式控制（适合按钮/小组件），通过自定义指令如v-permission实现；2）组件封装式控制（适合通用组件），封装<Permission>容器组件；3）编程式控制（适合复杂逻辑），在JS中直接判断权限。所有方案都需配合后端接口校验防止权限篡改，并适配不同框架如Vue、React和Angular。关键点是先规范权限数据管理，再选择适合的控制方式，同时确保后端兜底校验。
vue2纯前端使用Docxtemplater生成word报告，包含echart图表，表格
m0_49529959的博客
01-08 219
纯前端使用Docxtemplater生成docx报告，包含echart图表
22-mini-vue props
weixin_57142035的博客
01-04 191
【代码】22-mini-vue props。
【鸿蒙】web 加载vue dist 包里的 html
产品：SmartApi；服务：大前端++；其他技术分享
01-05 290
下面给你「带进度条 + 判断 index.html 已存在则跳过解压」的完整可运行版本，直接替换即可通过 ArkTS 校验。
前端 HTML/CSS 核心知识点总结（定位、层级、透明、交互、布局）
2301_80724696的博客
01-05 939
本文总结了前端开发中6个核心知识点：1.定位与层级（z-index仅对定位元素生效，子元素始终在父元素之上）；2.5种元素居中方法（绝对定位+margin、transform平移、flex等）；3.透明效果实现（opacity继承性、rgba局部透明）；4.label标签优化表单交互；5.Swiper插件实现轮播图；6.纯CSS实现Tab切换（利用:checked伪类）。这些实战技巧涵盖布局、交互等高频场景，能有效提升开发效率。
37.useWindowSize
最新发布
粉丝们务必加入微信粉丝群
01-08 25
钩子是一个非常有用的工具，特别适合需要响应式设计的 Web 应用。通过使用这个钩子，开发者可以轻松地为应用添加响应式能力，提高用户体验，特别是在不同设备和屏幕尺寸上。在开发现代化的、响应式的 React 应用时，这个自定义钩子可以显著提高开发效率和应用的适应性。钩子提供了一种简单而有效的方式来在 React 组件中监测和响应窗口尺寸的变化。这个自定义钩子不仅封装了窗口resize事件的处理，还能够实时更新组件状态。是一个常见需求，对于实现响应式设计和优化用户界面至关重要。在响应式 Web 应用开发中，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值