BOM

简介: BOM

Bom 称为浏览器对象模型(bowser object model),也就意味他可以获取浏览器上的所有内容以及相关的操作。BOM缺乏规范的,存在共有对象来解决这个问题,但是共有对象也存在兼容问题(ie10以后)
d2e28b33fde8b43dbff51c573cc77789_28335994-662b3da5a19de4df.png

概述: window是顶层对象 属于golbal对象。他是所有全局变量的父亲。
// window //对象
console.log(window);//window 对象 Window的构造函数
//常用的弹窗方法及打印方法
window.console.log('hello')//console.log() window可以省略的
console.log('日志')//控制台 log日志 以日志的形式打印
console.error('错误')//以错误的形式打印
console.warn('警告')//以错误的形式打印
console.debug('测试')//以错误的形式打印
console.info('信息提示')//以错误的形式打印
//弹窗
window.alert('hello')//弹提示窗
var isTrue=confirm('你确认要删除吗')//交互框 true确认 false取消 返回
console.log(isTrue);
var str=prompt('请输入你的手机号')//输入框 他会有个输入框让你输入返回对应的你输入的内容 (string的内容)
console.log(str);
//打开 open 关闭 close
// 第一个参数是url地址 第二个参数为title target(打开方式 _blank _self _parent) 第三个参数为设置的参数(窗口的高度 宽度等等)
window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0')
//   height=100 窗⼝⾼度;
//   width=400 窗⼝宽度;
//   top=0 窗⼝距离屏幕上⽅的象素值;
//   left=0 窗⼝距离屏幕左侧的象素值;
//   toolbar=no 是否显⽰⼯具栏,yes为显⽰;
//   menubar,scrollbars 表⽰菜单栏和滚动栏。
//   resizable=no 是否允许改变窗⼝⼤⼩,yes为允许;
//   location=no 是否显⽰地址栏,yes为允许;
//   status=no 是否显⽰状态栏内的信息(通常是⽂件已经打开),yes为允许;
window.close()//关闭当前的窗口 (关闭浏览器只能有一个页面)
//moveBy 一个是x轴的距离 y轴的距离
window.moveBy(100,100)//X+100 Y+100
//moveTo 一个x轴 一个y轴
window.moveTo(200,200)//X=200 Y=200
//改变对应的窗口大小
window.resizeBy(200,200)//width+200 height+200
//resizeTo
window.resizeTo(200,200)//width=200 height=200
//print打印方法
window.print()
聚焦和失焦的方法
//focus 聚焦 blur 失去焦点
window.focus()
window.blur()
//find查找 ctrl+f
window.find()
滚动栏位置改变
//滚动栏位置改变 初始位置 x:0,y:0
window.scrollBy(100,100)//原本的位置 x+100,y+100
window.scrollTo(500,500)//到达位置 x=500 y=500 //回到顶部
innerHeight 和 innerWidth
parent
location对象 (
console.log(location.hash)//哈希 #后面带的值

console.log(location.host)//主机 域名 ip地址+端口号
console.log(location.hostname)//主机名 ip地址 (127.0.0.1表示本机地址和localhost是一样的)
console.log(location.protocol)//协议 用于通信 (基于tcp/ip)http(明文传输) https(安全)(加密过)
console.log(location.port)//端口号 1--65525 (1-100的端口电脑占用了)http默认的端口80 https默认端口443
console.log(location.href)//链接的地址 也可以设置
console.log(location.search);//?后面带的值 一般是get请求传输数据的时候
console.log(location.origin);//跨域
console.log(location.pathname);//路径名 获取的除了协议和ip地址加端口号后面的东西
assign 跳转页面
location.assign('http://www.baidu.com')
replace 替换页面
location.replace('http://www.weibo.com')
reload 重新加载页面
location.reload()
//参数 boolean类型的值 true(从服务器加载 慢) false (从缓存中加载 快)
history对象 (

属性
length 历史页面个数
state 状态存储的对象
scrollRestoration 滚动栏恢复
方法
forwad 前进
functionfn(){
history.forward()//前进
back 后退
functionfn1(){
history.back()//后退
go 去任意的历史页面
functionfn2(){
history.go(-1)//去任意页面 0就是自己 小于0 后退 大于0前进
pushState
//spa 单页应用
functionfn3(){
//添加state的值 数据 "" 地址(会产生跨域问题)
history.pushState('hello','','./index.html')//会改地址 但是不会刷新 推一个历史页面到历史区 state设置进去
replaceState
functionfn4(){
//替换state
history.replaceState('world','','/location对象讲解.html')//会改地址 但是不会刷新 在历史区直接修改当前这个历史页面 state设置进去
screen 对象
属性
avaliHeight 可占用的最大高度
avaliWidth 可占用的最大宽度
avaliLeft 离屏幕左侧的距离
avaliTop 离屏幕上方的距离
navigator对象
属性
userAgent 用户浏览器设置信息
路由 (扩展)
对应的开发者来说 路由是一个很重要的东西。(前端路由)(后端路由)
后端路由
根据对应的接口地址来访问不同的功能 (后端路由 restful风格(接口的风格))
前端路由
根据不同的访问路径 (path)来渲染不同的内容(组件)

相关文章
|
2天前
|
搜索推荐 编译器 Linux
一个可用于企业开发及通用跨平台的Makefile文件
一款适用于企业级开发的通用跨平台Makefile,支持C/C++混合编译、多目标输出(可执行文件、静态/动态库)、Release/Debug版本管理。配置简洁,仅需修改带`MF_CONFIGURE_`前缀的变量,支持脚本化配置与子Makefile管理,具备完善日志、错误提示和跨平台兼容性,附详细文档与示例,便于学习与集成。
251 116
|
17天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
11天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
648 220
|
存储 人工智能 监控
从代码生成到自主决策:打造一个Coding驱动的“自我编程”Agent
本文介绍了一种基于LLM的“自我编程”Agent系统,通过代码驱动实现复杂逻辑。该Agent以Python为执行引擎,结合Py4j实现Java与Python交互,支持多工具调用、记忆分层与上下文工程,具备感知、认知、表达、自我评估等能力模块,目标是打造可进化的“1.5线”智能助手。
885 61
|
9天前
|
人工智能 移动开发 自然语言处理
2025最新HTML静态网页制作工具推荐:10款免费在线生成器小白也能5分钟上手
晓猛团队精选2025年10款真正免费、无需编程的在线HTML建站工具,涵盖AI生成、拖拽编辑、设计稿转代码等多种类型,均支持浏览器直接使用、快速出图与文件导出,特别适合零基础用户快速搭建个人网站、落地页或企业官网。
1443 157
|
6天前
|
编解码 Linux 数据安全/隐私保护
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
278 139
|
8天前
|
存储 安全 固态存储
四款WIN PE工具,都可以实现U盘安装教程
Windows PE是基于NT内核的轻量系统,用于系统安装、分区管理及故障修复。本文推荐多款PE制作工具,支持U盘启动,兼容UEFI/Legacy模式,具备备份还原、驱动识别等功能,操作简便,适合新旧电脑维护使用。
586 109