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

05.BOM对象

news 2026/2/9 0:59:03

一、js组成

JavaScript的组成

  • ECMAScript:

    • 规定了js基础语法核心知识。
    • 比如：变量、分支语句、循环语句、对象等等

  • Web APIs :

    • DOM 文档对象模型， 定义了一套操作HTML文档的API
    • BOM 浏览器对象模型，定义了一套操作浏览器窗口的API

在这里插入图片描述

二、window对象

BOM (Browser Object Model ) 是浏览器对象模型

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

在这里插入图片描述

三、定时器-延迟函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

语法：

setTimeout(回调函数, 延迟时间)

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

间歇函数 setInterval : 每隔一段时间就执行一次， , 平时省略window

清除延时函数：

clearTimeout(timerId)

注意点

  1. 延时函数需要等待,所以后面的代码先执行
  2. 返回值是一个正整数，表示定时器的编号
<body><script>// 定时器之延迟函数// 1. 开启延迟函数let timerId = setTimeout(function () {console.log('我只执行一次')}, 3000)// 1.1 延迟函数返回的还是一个正整数数字，表示延迟函数的编号console.log(timerId)// 1.2 延迟函数需要等待时间，所以下面的代码优先执行// 2. 关闭延迟函数clearTimeout(timerId)</script>
</body>

四、location对象

location (地址) 它拆分并保存了 URL 地址的各个组成部分， 它是一个对象

属性/方法说明
href属性，获取完整的 URL 地址，赋值时用于地址的跳转
search属性，获取地址中携带的参数，符号 ？后面部分
hash属性，获取地址中的啥希值，符号 # 后面部分
reload()方法，用来刷新当前页面，传入参数 true 时表示强制刷新
<body><form><input type="text" name="search"> <button>搜索</button></form><a href="#/music">音乐</a><a href="#/download">下载</a><button class="reload">刷新页面</button><script>// location 对象  // 1. href属性 （重点） 得到完整地址，赋值则是跳转到新地址console.log(location.href)// location.href = 'http://www.itcast.cn'// 2. search属性  得到 ? 后面的地址 console.log(location.search)  // ?search=笔记本// 3. hash属性  得到 # 后面的地址console.log(location.hash)// 4. reload 方法  刷新页面const btn = document.querySelector('.reload')btn.addEventListener('click', function () {// location.reload() // 页面刷新location.reload(true) // 强制页面刷新 ctrl+f5})</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 办公系统中见到。

在这里插入图片描述

常见方法：

在这里插入图片描述

<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>
</body>

七、本地存储（今日重点）

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

常见的使用场景：

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

好处：

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

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

1.localStorage（重点）

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

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>本地存储-localstorage</title>
</head><body><script>// 本地存储 - localstorage 存储的是字符串 // 1. 存储localStorage.setItem('age', 18)// 2. 获取console.log(typeof localStorage.getItem('age'))// 3. 删除localStorage.removeItem('age')</script>
</body></html>

2.sessionStorage（了解）

特性：

  • 用法跟localStorage基本相同
  • 区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除

存储：sessionStorage.setItem(key,value)

获取：sessionStorage.getItem(key)

删除：sessionStorage.removeItem(key)

3.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>

八、综合案例

1.数组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）

2.数组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>

相关文章：

05.BOM对象

一、js组成 JavaScript的组成 ECMAScript: 规定了js基础语法核心知识。比如&#xff1a;变量、分支语句、循环语句、对象等等 Web APIs : DOM 文档对象模型&#xff0c; 定义了一套操作HTML文档的APIBOM 浏览器对象模型&#xff0c;定义了一套操作浏览器窗口的API 二、windo…...

编程日记 2024/3/17 16:05:22

【Golang星辰图】Go语言游戏开发：选择合适的库加速你的开发过程

打造出色的游戏体验&#xff1a;使用Go库进行游戏和图形开发 前言 Go语言通过其简洁、高效和并发性的特性&#xff0c;逐渐在开发领域中崭露头角。对于游戏和图形开发&#xff0c;Go也有一些优秀的库和引擎可供选择。本文将介绍几个流行的Go库&#xff0c;包括ebiten、raylib…...

编程日记 2024/3/17 15:59:15

51单片机-AT24C02(I2C总线）

目录 一&#xff0c;介绍及元件工作原理 7.时序结构&#xff08;重要&#xff09; 8.i2C总线数据帧&#xff08;重要&#xff09; 二&#xff0c;应用 一&#xff0c;介绍及元件工作原理 1.元件介绍 2.存储器 3.地址总线和数据总线 地址总线只能一次选中一行 4.引脚及应用…...

编程日记 2024/3/17 15:56:12

面试经典-MySQL篇

一、MySQL组成 MySQL数据库的连接池&#xff1a;由一个线程来监听一个连接上请求以及读取请求数据&#xff0c;解析出来一条我们发送过去的SQL语句SQL接口&#xff1a;负责处理接收到的SQL语句查询解析器&#xff1a;让MySQL能看懂SQL语句查询优化器&#xff1a;选择最优的查询…...

编程日记 2024/3/17 15:53:08

C#控制台贪吃蛇

Console.Write("");// 第一次生成食物位置 // 随机生成一个食物的位置 // 食物生成完成后判断食物生成的位置与现在的蛇的身体或者障碍物有冲突 // 食物的位置与蛇的身体或者障碍物冲突了&#xff0c;那么一直重新生成食物&#xff0c;直到生成不冲突…...

编程日记 2024/3/17 15:51:06

[小程序开发] 构造页面

一、Component方法 Component方法用于创建自定义组件&#xff0c;小程序页面也可以使用Component方法进行创建&#xff0c;从而实现复杂的页面逻辑开发。 使用Component方法构造页面&#xff0c;可以实现更加复杂的页面逻辑开发。 二、注意事项 1、要求.json文件中必须包含usi…...

编程日记 2024/3/17 15:50:06

安装Android Studio遇到Unable to access Android SDK add-on list的错误

第一次安装android studio的时候&#xff0c;提示&#xff1a;unable to access Android sdk add-on list 解决办法 这个错误一般是android studoi代理没有设置导致的&#xff0c;需要在setting里面设置&#xff1a; 点击Android Studio - Preferences&#xff0c;在 Appeara…...

编程日记 2024/3/17 15:48:03

EXCEL+PYTHON学习3

1&#xff09; 遍历一个SHEET&#xff0c;无非就是两个循环&#xff0c;rows属性是取得所有行。 fn data3_16.xlsx wb openpyxl.load_workbook(fn) ws wb.active for row in ws.rows:for cell in row:print(cell.value, end )print() 2&#xff09; 返回工作表的最小行数…...

编程日记 2024/3/17 15:46:01

Rabbit MQ详解

写在前面,由于Rabbit MQ涉及的内容较多&#xff0c;赶在春招我个人先按照我认为重要的内容进行一定总结&#xff0c;也算是个学习笔记吧。主要参考官方文档、其他优秀文章、大模型问答。自己边学习边总结。后面有时间我会慢慢把所有内容补全&#xff0c;分享出来也是希望可以给…...

编程日记 2024/3/17 15:42:59

uniapp 写安卓app，运行到手机端 调试

手机 设置》关于手机》点击版本号 4-5次&#xff0c;弹出手机锁屏页面&#xff0c;输入手机锁屏密码 2.手机 设置中 》搜索 开发人员选项 》 调试》打开USB调试 同页面 找到 选择USB配置》选择 MIDIhbuilder 编辑器 点击 》运行》运行到手机或模拟器》运行到Android App基座 》…...

编程日记 2024/3/17 15:41:58

uniapp 实现双击点赞出现特效

更新一下 老板改了需求要加上特效 1. 创建点赞按钮 首先&#xff0c;在你的页面中创建一个点赞按钮 全局点赞的话就写在最外面的标签就行了。你可以使用 <button> 组件或者自定义一个视图组件。 <template> <view class"container"> <but…...

编程日记 2024/3/17 15:35:53

分布式搜索引擎elasticsearch（2）

1.DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;[Domain Specific Language](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl.html)&#xff09;来定义查…...

编程日记 2024/3/17 15:34:52

如何实现一个栈或队列？

如何实现一个栈或队列&#xff1f; 栈&#xff08;Stack&#xff09;和队列&#xff08;Queue&#xff09;是两种常见的数据结构&#xff0c;它们在编程中经常被使用。下面我将分别解释如何使用Python来实现这两种数据结构。 1. 栈的实现 栈是一种后进先出&#xff08;LIF…...

编程日记 2024/3/17 15:31:49

STM32输入捕获频率和占空比proteus仿真失败

这次用了两天的时间来验证这个功能&#xff0c;虽然实验没有成功&#xff0c;但是也要记录一下&#xff0c;后面能解决了&#xff0c;回来再写上解决的办法&#xff1a; 这个程序最后的实验结果是读取到的CCR1和CCR2的值都是0&#xff0c;所以没有办法算出来频率和占空比。 还…...

编程日记 2024/3/17 15:30:48

Kafka-SSL笔记整理

创建密钥仓库以及CA 创建密匙仓库,用户存储证书文件keytool -keystore server.keystore.jks -alias hello_kafka -validity 100000 -genkey创建CAopenssl req -new -x509 -keyout ca-key -out ca-cert -days 100000将生成的CA添加到客户端信任库keytool -keystore client.trus…...

编程日记 2024/3/17 15:28:46

Mysql挂掉怎么办

思路 从库处理&#xff0c;relaylog&#xff0c;讲从库升级主库。 待主机恢复后&#xff0c;主机替换为从库。 具体操作 简介&#xff1a; 主库宕机 Master DOWN机-企业场景一主多从宕机从库切换主继续和从同步过程详解 登陆从库&#xff0c;show processlist; 查看两个线…...

编程日记 2024/3/17 15:27:45

《工厂模式（极简c++）》

本文章属于专栏《设计模式&#xff08;极简c版&#xff09;》 继续上一篇《设计原则》。本章简要说明工厂模式。本文分为模式说明、本质思想、实践建议、代码示例四个部分。 模式说明&#xff1a; 简单工厂模式 方案&#xff1a;对象不直接new&#xff0c;而是通过另一个类&am…...

编程日记 2024/3/17 15:25:44

前端学习笔记|JavaScript基础

JS基础 数据类型 基于动力节点视频。 Number、String、Boolean、object 强制转换 Number 强转,boolean强转(undefined、null、NaN都是转成false)&#xff0c;String强转 myAge Number("123445"); Boolean(0); String(123);parseInt、parseFloat 遇到非数字&…...

编程日记 2024/3/17 15:24:43

springcloud五大组件:Eureka：注册中心、Zuul：服务网关、Ribbon：负载均衡、Feign：服务调用、Hystix：熔断器

你提到的这些组件都是Spring Cloud生态系统中非常关键和常用的组件。但是&#xff0c;关于这些组件的命名&#xff0c;有一点需要更正&#xff1a; Eureka 应该是 Eureka 或者 Eureka Server&#xff1a;Eureka是Netflix开源的一个服务发现组件&#xff0c;它本身是一个基于RE…...

编程日记 2024/3/17 15:21:39

Python的Selenium库中的模块、类和异常的汇总

这些是 Selenium Python 库中的模块、类和异常&#xff0c;用于实现自动化 Web 浏览器测试和网页操作。以下是它们的简单解释&#xff1a;Python Module Index — Selenium 4.18.1 documentation 1. selenium.common.exceptions&#xff1a;包含了 Selenium 中可能出现的异常。…...

编程日记 2024/3/17 15:19:36

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/1/28 10:02:54

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2026/1/23 8:33:56

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2026/1/29 5:26:37

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2026/1/31 8:16:58

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

编程新知 2026/2/4 18:42:53