JavaScript BOM对象与浏览器API教学

20XX/XX/XXJavaScriptBOM对象与浏览器API教学汇报人:XXXCONTENTS目录01

课程导入02

BOM与浏览器API核心概念03

常用BOM核心对象及方法04

常用浏览器API及用法05

综合实战开发示例06

课程总结与作业课程导入01掌握BOM核心对象操作方法熟练操作window、location等BOM核心对象，能实现页面跳转、获取浏览器信息等功能。精通浏览器API常用场景应用掌握LocalStorage存储、Geolocation定位等API，能开发如本地数据缓存类实用功能。具备BOM与API协同开发能力可结合BOM对象与浏览器API，完成如监听浏览器窗口大小变化并适配页面的综合案例。课程学习目标前置知识回顾JavaScript基础语法回顾需掌握变量声明、函数定义、条件判断等基础，比如用let声明变量、function定义普通函数。DOM核心概念回顾回顾DOM树结构、元素获取与操作，例如通过getElementById获取页面指定元素。浏览器运行环境认知回顾了解浏览器对JS的执行机制，比如JS引擎逐行解析代码、异步任务的队列处理逻辑。BOM与浏览器API核心概念02BOM的定义与作用BOM的官方定义阐释BOM即浏览器对象模型，是用于操作浏览器窗口及组件的API集合，独立于HTML文档结构。BOM的核心作用解析它可实现浏览器窗口控制、导航跳转等功能，比如通过window.open()打开新浏览器窗口。BOM与DOM的边界区分BOM聚焦浏览器层面操作，DOM专注文档内容操控，二者分工明确共同支撑前端交互。BOM功能的补充延伸浏览器API可拓展BOM能力，如FetchAPI可实现更灵活的网络请求，弥补BOM原生功能局限。前端交互的核心支撑浏览器API是页面交互的关键，如CanvasAPI可实现复杂图形绘制，支撑各类可视化交互场景。跨场景适配的底层依托浏览器API提供跨设备适配能力，如GeolocationAPI可获取地理位置，适配LBS类应用开发需求。浏览器API的定位常用BOM核心对象及方法03window顶级对象

window对象的全局属性特性window作为全局作用域载体，所有全局变量、函数均为其属性，如console、document等均挂载其上。

window.open()打开新窗口方法调用window.open()可创建新浏览器窗口，常用于实现页面跳转，如电商平台的商品详情弹窗。

window.resizeTo()窗口尺寸控制方法通过window.resizeTo(width,height)可精准调整浏览器窗口大小，适配特定展示需求。location地址对象

获取当前页面URL信息通过location.href可获取完整URL，比如在百度页面执行，会返回"/"这类完整地址。

修改页面跳转目标使用location.assign()方法可跳转新页面，例如location.assign("/")会跳转至谷歌首页。

刷新当前页面操作调用location.reload()能刷新页面，添加参数true可强制从服务器重新加载资源。获取浏览器名称与版本可通过userAgent属性识别，比如Chrome浏览器会返回包含"Chrome"字段的字符串，便于适配不同浏览器。检测设备类型借助platform属性判断设备，如返回"Win32"代表Windows电脑，返回"iPhone"则为苹果手机。判断是否在线状态利用onLine属性检测网络连接，在线时返回true，可据此提示用户当前网络状态。navigator浏览器信息对象history历史记录对象

history.back()方法实现页面后退该方法可让浏览器返回上一页，类似点击浏览器左上角后退按钮，如浏览新闻时返回列表页。

history.forward()方法实现页面前进调用此方法能前进到下一页，等同于点击浏览器前进按钮，适合用户回退后续操作返回原页面。

history.go()方法跳转指定页面该方法可传入整数参数跳转对应页面，如history.go(-2)表示后退两页，灵活控制浏览历史。screen屏幕信息对象

获取屏幕基础尺寸可通过screen.width和screen.height获取屏幕的整体宽高，比如在办公电脑上可获取到1920×1080这类标准分辨率。

获取可用工作区尺寸利用screen.availWidth和screen.availHeight获取系统任务栏外的可用区域，适配不同设备的页面布局。

获取屏幕色彩参数通过screen.colorDepth获取屏幕色彩位数，常见值为24或32，用于判断页面色彩显示兼容性。常用浏览器API及用法04定时器API

setTimeout()延迟执行该API可设置延迟时间，比如3秒后执行弹窗提示，常用于页面加载后的延迟交互场景。

setInterval()定时重复执行它能按设定周期重复执行代码，像在线时钟每秒刷新时间，实现动态数据实时更新。

clearTimeout()终止延迟任务可提前清除已设置的setTimeout任务，比如用户取消操作后，终止即将弹出的确认提示。

clearInterval()终止定时任务用于停止setInterval的重复执行，比如结束实时天气数据的自动刷新，节省系统资源。本地存储APIlocalStorage持久化存储它可长期保存数据，比如电商网站用它存储用户浏览记录，关闭浏览器后数据仍留存。sessionStorage会话级存储仅在当前会话有效，在线表单填写时常用，关闭页面后存储的临时数据便会清除。StorageAPI核心方法使用通过setItem()存数据、getItem()取数据，如用setItem("username","zhangsan")存储用户名。DOM操作基础API

元素选择API通过getElementById、querySelector等方法，可精准选取页面元素，比如获取id为"main"的核心节点。

元素内容修改API利用innerHTML、textContent属性，能修改元素内容，例如把段落文本替换为课程介绍内容。

元素样式操作API借助style属性可调整元素样式，像修改div元素的backgroundColor属性来更换背景色。页面可见性API

页面可见性状态判断方法通过document.hidden属性可直接判断页面是否处于隐藏状态，是该API最基础的用法。

可见性状态变更监听监听visibilitychange事件，当页面切换可见状态时触发，比如用户切换浏览器标签页。

页面可见性API的典型应用视频网站可利用该API，在页面隐藏时自动暂停视频，节省用户流量与设备资源。综合实战开发示例05标签页切换功能开发标签页导航栏布局实现通过HTML搭建导航栏结构，结合CSS设置样式，参考掘金官网标签栏实现高亮选中状态。点击切换事件绑定利用BOM的事件监听API为标签绑定点击事件，触发时切换对应内容面板显示状态。标签内容区域动态切换借助DOM操作API隐藏未选中面板，显示目标面板，实现如CSDN教程页的无缝切换效果。本地记住密码实现获取用户表单输入信息通过JavaScript监听登录表单提交事件，获取用户输入的账号与密码信息，为后续存储做准备。利用localStorage存储密码数据借助浏览器localStorageAPI，将用户勾选“记住密码”后的账号密码以键值对形式持久化存储。页面加载时自动填充账号密码页面初始化时读取localStorage中的存储数据，若存在则自动填充至登录表单对应输入框内。返回顶部按钮开发

按钮UI设计与初始隐藏采用固定定位设计悬浮按钮，初始设置为隐藏状态，可参考掘金官网返回顶部按钮的简约样式。

滚动监听与显示逻辑实现监听window.scroll事件，当页面滚动距离超过300px时，通过JS控制按钮显示。

点击事件与平滑滚动实现为按钮绑定点击事件，调用window.scrollTo方法，设置behavior:'smooth'实现平滑返回顶部。课程总结与作业0601BOM核心对象功能归纳梳理window、location、navigator等核心对象的核心API，如window.open()、location.href跳转等。02浏览器API应用场景总结总结Geolocation、Notification等API的适用场景，如外卖APP用定位获取用户位置。03BOM与DOM交互要点整理整理BOM对象操控DOM的关键逻辑，比如通过window.onload确保DOM加载完成后执行代码。核心