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

JavaScript：浏览器对象模型BOM

news 文章来源：https://blog.csdn.net/2401_86036532/article/details/143800023 2025/5/12 7:34:39

BOM介绍

浏览器对象模型（Brower Object Model，BOM）提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。

BOM与DOM区别

DOM是文档对象模型，把文档当做对象来看待，它的顶级对象是document，我们主要学习的是操作页面元素。DOM是W3C标准规范。

BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的顶级对象是window，我们主要学习的是浏览器窗口交互的一些对象。BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

window对象

window 对象是一个全局对象，也可以说是 JavaScript 中的顶级对象
像 document、alert()、console.log()这些都是 window 的属性，基本 BOM 的属性和方法都是 window 的
所有通过 var 定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
window 对象下的属性和方法调用的时候可以省略 window

window对象常见事件

窗口加载事件

window.onload

window.onload是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。

onload 页面加载事件有两种注册方式：

//方式1

window.οnlοad=function(){}

//方式2

window. addEventListener(‘load’,function(){})

演示案例：

<body><input type="button" name="" id="" value="按钮"><script>window.addEventListener('load', function() {// 当页面加载完成后执行的代码alert('kiss me');var btn = document.querySelector('input');btn.addEventListener('click', function() {alert('hug me');});});</script></body>

需要注意的是，window.onload注册事件的方式只能写一次，如果有多个，会以最后一个window.onload为准。如果使用addEventListener则没有限制。

document.DOMContentLoaded

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。le9以上才支持

如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。

load 等页面内容全部加载完毕，包含页面dom元素，图片，f1ash， css等等

DOMContentLoaded是DOM加载完毕，不包含图片falsh css 等就可以执行，加载速度比load更快一些

<body><input type="button" value="按钮"><script>window.addEventListener('load',function(){var btn=document.querySelector('input')btn.addEventListener('click',function(){alert('hug me')})})window.addEventListener('load',function(){alert('kiss me')})document.addEventListener('DOMContentLoaded',function(){alert('lalala')})//1oad 等页面内容全部加载完毕，包含页面dom元素图片f1ash css等//DoMcontentLoaded是DOM加载完毕，不包含图片falshcss等就可以执行加载速度比1oad更快一些</script></body>

调整窗口大小事件

当调整window窗口大小时，就会触发window.onload事件，调用事件处理函数，该事件有两种注册方式：

//方式1

window.οnresize=function(){}

//方式2

Window.addEventListener(‘resize’,function(){})

利用页面加载事件和调整窗口大小事件，完成响应式布局，示例代码如下：

<style>div{width: 200px;height: 100px;background-color: pink;}</style></head><body><div></div><script>window.addEventListener('load',function(){var div=document.querySelector('div')window.addEventListener('resize',function(){if(window.innerWidth<=800){div.style.display='none'}else{div.style.display='block'}})})</script></body

定时器

定时器方法

在JavaScript中，提供了两组方法用于定时器的实现，具体方法如下：

定时器方法：

方法	说明
setTimeout()	在指定的毫秒数后调用函数或执行一段代码
setInterval()	按指定的周期（以毫秒计）来调用函数或执行一段代码
clearTimeout()	取消由setTimeout()方法设置的定时器
clearInterval()	取消由setInterval（）设置的定时器

在实际开发中，我们可以使用setTimeout（）方法实现函数的一次调用，并且可以通过clearTimeout（）清除定时器

location对象

location对象比较特别，它既是window对象的属性，同时也而是document对象的属性，window.location等同于document.location,它们是引用了同一个对象。Location对象不仅提供了与当前显示文档相关的信息，而且还提供了用户获取和设置窗体的URL。

location URL的示例：

示例1：

protocol://host[:port]/path/[?query]#fragment

示例2：

http：//www.example.com:80/web/index.html?a=3&b=4#res

location URL的组成

各部分	说明
protocol	网络协议，常用的如http、ftp、mailto等
host	服务器的主机名，如www.example.com
port	端口号，可选，省略时使用协议的默认端口，如http默认端口为80
path	路径，如“/web/index.html”
query	参数，为键值对的形式，通过“&”符号分割，如“a=3&b=4”
fragment	锚点，如“#res”，表示页面内的锚点

案例：获取URL参数

创建login.html登录页面，搭建表格结构，示例代码如下：

<body><form action="index.html">用户名：<input type="text" name="uname"><input type="submit" value="登录"></form></body>

上述代码中用action属性把表单提交到index.html页面

Index.html代码示例如下：

<body>  <div></div><script>console.log(location.search)var params=location.search.substr(1)console.log(params)var arr=params.split('=')console.log(arr)var div=document.querySelector('div')div.innerHTML=arr[1]+'欢迎您'</script></body>

location 的常用方法

方法	说明
assign()	载入一个新文档
reload()	重新加载当前文档
replace()	用新的文档替换当前文档，覆盖浏览器当前文档

location.assign() 可以立即打开一个新的浏览器位置，并生成一条新的历史记录，接受的参数为URL地址

reload（）方法的唯一参数，是一个布尔类型的值，将其设置为true时，它会绕过缓存，从服务器上重新下载该文档，类似于浏览器中的刷新按钮

replace（）方法的作用是使浏览器的位置发生改变，并且禁止在浏览器历史记录中生成新的记录，它只接受一个要导航到的URL参数，而且在调用replace（）方法后，用户不能返回到前一个页面

示例代码：

<body><input type="button" value="按钮1" class="one"><input type="button" value="按钮2" class="two"><input type="button" value="按钮3" class="three"><script>const btn1=document.querySelector('.one')const btn2=document.querySelector('.two')const btn3=document.querySelector('.three')btn1.addEventListener('click',()=>{location.assign("https://blog.csdn.net/")})btn2.addEventListener('click',()=>{location.reload()})btn3.addEventListener('click',()=>{location.replace('https://www.baidu.com/')})</script></body>

navigator 对象

navigator 是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法：

• 通过 userAgent 检测浏览器的版本及平台

// 检测 userAgent（浏览器信息）(function () {const userAgent = navigator.userAgent// 验证是否为 Android 或 iPhoneconst android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)// 如果是 Android 或 iPhone，则跳转至移动站点if (android || iphone) {location.href = 'http://m.itcast.cn'}})();

histroy 对象

history (历史)是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退等

使用场景

history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

history对象的属性和方法

分类	名称	说明
属性	length	返回历史列表中的网址数
方法	back（）	加载history列表中的前一个URL
	forward（）	加载history列表中的下一个URL
	go（）	加载history列表中的某一个具体页面

<body><button class="back">←后退</button><button class="forward">前进→</button><script>// histroy 对象// 1.前进const forward = document.querySelector('.forward')forward.addEventListener('click', function () {// history.forward()history.go(1)})// 2.后退const back = document.querySelector('.back')back.addEventListener('click', function () {// history.back()history.go(-1)})</script>

本地存储（今日重点）

本地存储：将数据存储在本地浏览器中

常见的使用场景：

https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失

好处：

1、页面刷新或者关闭不丢失数据，实现数据持久化

2、容量较大，sessionStorage 和 localStorage 约 5M 左右

localStorage（重点）

作用: 数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失

特性：以键值对的形式存储，并且存储的是字符串，省略了 window

<body><script>// 本地存储 - localstorage 存储的是字符串// 1. 存储localStorage.setItem('age', 18)// 2. 获取console.log(typeof localStorage.getItem('age'))// 3. 删除localStorage.removeItem('age')</script></body>

sessionStorage（了解）

特性：

• 用法跟 localStorage 基本相同

• 区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除

存储：sessionStorage.setItem(key,value)

获取：sessionStorage.getItem(key)

删除：sessionStorage.removeItem(key)

localStorage 存储复杂数据类型

问题：本地只能存储字符串,无法存储复杂数据类型.

解决：需要将复杂数据类型转换成 JSON 字符串,在存储到本地

语法：JSON.stringify(复杂数据类型)

JSON 字符串：

• 首先是 1 个字符串

• 属性名使用双引号引起来，不能单引号

• 属性值如果是字符串型也必须双引号

<body><script>// 本地存储复杂数据类型const goods = {name: '小米',price: 1999}// localStorage.setItem('goods', goods)// console.log(localStorage.getItem('goods'))// 1. 把对象转换为 JSON 字符串 JSON.stringifylocalStorage.setItem('goods', JSON.stringify(goods))// console.log(typeof localStorage.getItem('goods'))</script></body>

问题：因为本地存储里面取出来的是字符串，不是对象，无法直接使用

解决： 把取出来的字符串转换为对象

语法：JSON.parse(JSON 字符串)<body>

<script>// 本地存储复杂数据类型const goods = {name: '小米',price: 1999}// localStorage.setItem('goods', goods)// console.log(localStorage.getItem('goods'))// 1. 把对象转换为 JSON 字符串 JSON.stringifylocalStorage.setItem('goods', JSON.stringify(goods))// console.log(typeof localStorage.getItem('goods'))// 2. 把 JSON 字符串转换为对象 JSON.parseconsole.log(JSON.parse(localStorage.getItem('goods')))</script></body

综合案例

数组 map 方法

使用场景：

map 可以遍历数组处理数据，并且返回新的数组

语法：

<body><script>const arr = ['red', 'blue', 'pink']// 1. 数组 map 方法 处理数据并且 返回一个数组const newArr = arr.map(function (ele, index) {// console.log(ele) // 数组元素// console.log(index) // 索引号return ele + '颜色'})console.log(newArr)</script></body>

map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。

map 重点在于有返回值，forEach 没有返回值（undefined）

数组 join 方法

作用：join() 方法用于把数组中的所有元素转换一个字符串

语法：

<body><script>const arr = ['red', 'blue', 'pink']// 1. 数组 map 方法 处理数据并且 返回一个数组const newArr = arr.map(function (ele, index) {// console.log(ele) // 数组元素// console.log(index) // 索引号return ele + '颜色'})console.log(newArr)// 2. 数组 join 方法 把数组转换为字符串// 小括号为空则逗号分割console.log(newArr.join()) // red 颜色,blue 颜色,pink 颜色// 小括号是空字符串，则元素之间没有分隔符console.log(newArr.join('')) //red 颜色 blue 颜色 pink 颜色console.log(newArr.join('|')) //red 颜色|blue 颜色|pink 颜色</script></body

JavaScript：浏览器对象模型BOM

BOM介绍浏览器对象模型（Brower Object Model，BOM）提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。 BOM与DOM区别 DOM是文档对…...

编程日记 2024/11/16 19:00:31

Unity音频导入设置

参考：unity官方文档导入设置 Force To Mono：强制单声道。启用后音频片段将降混为单声道声音。可以节省该资源所占据的空间。 Normalize：峰值归一化。降混过程通常会导致信号比原始信号更安静。峰值归一化的信号为音频源的音量属性提供了后…...

编程日记 2024/11/16 18:52:22

数据介绍绪论............................................................................................................................. 1 对外投资合作高质量发展迈出新步伐................................................................... 2 第一篇发…...

编程日记 2024/11/16 18:51:21

java8之Stream流

文章目录 Stream流的定义和特性‌定义特性‌中间操作‌终结操作‌ 生成流forEachmapfilterlimitsorted并行（parallel）程序Collectors Stream流的定义和特性‌ 定义 Stream是Java 8 API添加的一个新的抽象，用于以声明性方式处理数据集合。它…...

编程日记 2024/11/16 18:50:19

pipx安装提示找不到包

执行： pipx install --include-deps --force "ansible6.*"WARNING: Retrying (Retry(total4, connectNone, readNone, redirectNone, statusNone)) after connection broken by NewConnectionError(<pip._vendor.urllib3.connection.HTTPSConnection …...

编程日记 2024/11/16 18:48:17

Codeforces Round 987 (Div. 2)（前四道）

A. Penchick and Modern Monument 翻译： 在繁华大都市马尼拉的摩天大楼中，菲律宾最新的 Noiph 购物中心刚刚竣工！建筑管理方 Penchick 订购了一座由 n 根支柱组成的先进纪念碑。纪念碑支柱的高度可以用一个由 n 个正整数组成的数组 h 来表示…...

编程日记 2024/11/16 18:46:13

PCB+SMT线上报价系统+PCB生产ERP系统自动化拼板模块升级

PCB生产ERP系统的智能拼版技术，是基于PCB前端报价系统获取到的用户或市场人员已录入系统的板子尺寸及set参数等，按照最优原则或利用率最大化原则自动进行计算并输出拼版样式图和板材利用率，提高工程人员效率，减少板材的浪费。覆铜…...

编程日记 2024/11/16 18:45:09

微信小程序_小程序视图与逻辑_day3

一、目标 A. 能够知道如何实现页面之间的导航跳转 B. 能够知道如何实现下拉刷新效果 C. 能够知道如何实现上拉加载更多效果 D. 能够知道小程序中常用的生命周期二、目录 A. 页面导航 B. 页面事件 C. 生命周期 D. WXS脚本 E. 案例-本地生活（列表页面）…...

编程日记 2024/11/16 18:40:05

kubesphere环境-本地Harbor仓库+k8s集群（单master 多master）＋Prometheus监控平台部署

前言：半月前在公司生产环境上离线部署了k8s集群Victoria Metrics(二开版)自研版夜莺监控平台的搭建，下面我租用3台华为云服务器演示部署kubesphere环境-本地Harbor仓库k8s集群（单master节点 & 单master节点）Prometheus监控部…...

编程日记 2024/11/16 18:38:03

【提高篇】3.3 GPIO（三，工作模式详解上）

目录一，工作模式介绍二，输入浮空 2.1 输入浮空简介 2.2 输入浮空特点 2.3 按键检测示例 2.4 高阻态三，输入上拉 3.1 输入上拉简介 3.2 输入上拉的特点 3.3 按键检测示例四，输入下拉 4.1 输入下拉简介 4.2 输入下拉特点 4.3 按键检测示例一，工作模式介绍…...

编程日记 2024/11/16 18:37:02

‘视’不可挡：OAK相机助力无人机智控飞行！

南京邮电大学通达学院的刘同学用我们的oak-d-lite实现精确打击无人机的避障和目标识别定位功能，取得了比赛冠军。我们盼望着更多的朋友们能够加入到我们OAK的队伍中来，参与到各式各样的比赛中去。我们相信，有了我们相机的助力，大家…...

编程日记 2024/11/16 18:36:01

javaScript交互补充（元素的三大系列）

1、元素的三大系列 1.1、offset系列 1.1.1、offset初相识使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等获得元素距离带有定位祖先元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不…...

编程日记 2024/11/16 18:35:00

数据结构（基本概念及顺序表）

基本概念： 1、引入程序数据结构算法数据： 数值数据：能够直接参加运算的数据（数值，字符） 非数值数据：不能够直接参加运算的数据（字符串、图片等） 数据即是信息的载…...

编程日记 2024/11/16 18:32:57

【全面系统性介绍】虚拟机VM中CentOS 7 安装和网络配置指南

一、CentOS 7下载源华为源：https://mirrors.huaweicloud.com/centos/7/isos/x86_64/ 阿里云源：centos-vault-7.9.2009-isos-x86_64安装包下载_开源镜像站-阿里云百度网盘源：https://pan.baidu.com/s/1MjFPWS2P2pIRMLA2ioDlVg?pwdfudi &…...

编程日记 2024/11/16 18:28:50

html + css 自适应首页布局案例

文章目录前言一、组成二、代码1. css 样式2. body 内容3.全部整体三、效果前言一个自适应的html布局一、组成整体居中，宽度1200px，小屏幕宽度100% 二、代码 1. css 样式代码如下（示例）： <style>* {…...

编程日记 2024/11/16 18:27:47

时钟之CSS+JS版

写在前面此版本绘制的时钟基于CSSJS模式。优点操作简单，缺点当然是不够灵活。下一篇会基于HTML5的canvas标签，使用JS绘制。会更灵活，元素更加丰富。 HTML代码 <div class"box"><article class"clock"><…...

编程日记 2024/11/16 18:23:44

ubuntu18.04 配置安卓编译环境

目前有个项目，验收时有个要求是在linux中进行编译打包生成apk文件。我平时都是在windows环境android studio中进行打包的，花了半天时间研究了一下，记录如下： 安装安卓sdk cd /opt wget https://dl.google.com/android/reposito…...

编程日记 2024/11/16 18:20:40

pycharm分支提交操作

一、Pycharm拉取Git远程仓库代码 1、点击VCS > Get from Version Control 2、输入git的url，选择自己的项目路径 3、点击Clone，就拉取成功了默认签出分支为main 选择develop签出即可进行开发工作二、创建分支（非必要可以不使用&#xf…...

编程日记 2024/11/16 18:19:38

ESP32-C3 开发笔记之 arduino 正常上传串口乱码2024/11/15

ESP32-C3 开发笔记之 arduino 正常上传串口乱码 ESP32-C3 开发笔记之 arduino 正常上传程序但是打开串口,串口快速刷新芯片一直处于重启状态找了很久的原因没找到,用Mixly 上传就正常最后看到这篇文章https://blog.csdn.net/luooove/article/details/132351398修改了Fl…...

编程日记 2024/11/16 18:10:28

Ubuntu 的 ROS 操作系统 turtlebot3 SLAM仿真

引言 SLAM（同步定位与地图构建）在Gazebo仿真环境中的应用能够模拟真实机器人进行环境建图和导航。通过SLAM仿真，开发者可以在虚拟环境中测试算法，而不必依赖真实硬件，便于调试与优化。 Gazebo提供了多个虚拟环境&…...

编程日记 2024/11/16 18:09:26

2024年11月15日

1.计算机网络逻辑右移做加减法定点乘法原码乘法运算一位乘计组 2.英语六级...

编程日记 2024/11/16 18:07:23

websocket初始化

websocket初始化前言上一集我们HTTP的ping操作就可以跑通了，那么我们还有一个协议---websocket，我们在这一集就要去完成我们websocket的初始化。分析我们在初始化websocket的之前，我们考虑一下，我们什么时候就要初始化我们…...

编程日记 2024/11/16 18:05:21

uniapp ios app以framwork形式接入sentry

一、下载Sentry mac终端输入：vim Podfile修改Podfile: platform :ios, 11.0 target YourApp douse_frameworks! # This is importantpod Sentry, :git > https://github.com/getsentry/sentry-cocoa.git, :tag > 8.40.1 end执行：pod install下载…...

编程日记 2024/11/16 18:02:19

⾃动化运维利器Ansible-基础

Ansible基础一、工作原理二、快速入门2.1 测试所有资产的网络连通性2.2 发布文件到被管理节点(资产) 三、资产(被管理节点)3.1 静态资产3.1.1 自定义资产3.1.2 自定义资产的使用3.1.3 资产选择器四、Ansible Ad-Hoc 命令4.1 模块类型4.1.1 command & shell 模块4.1.2 cop…...

编程日记 2024/11/16 17:59:16