1.什么是BOM
BOM(全称 bowser object mode)浏览器对象模型,用于操作浏览器相关的内容,BOM是一个缺乏规范的东西,为了保证他的规范性产生了一系列的共有对象来解决这个问题,沿用至今,但是这些共有对象也存在对应的兼容问题,直到W3C的介入(ie 10以后),他的兼容问题就得到了保证.
2.BOM的共有对象及相关的结构
单词
3.window的相关属性及方法
window属于浏览器的global对象(顶层对象),所有的全局函数及全局变量都是属于window的(window可以被省略)
控制台打印方法
- console.log
- console.error
- console.info
- console.warn
- console.debug
//window的控制台打印方法
//window.console(//console表示控制台) 表示浏览器的控制台
window.console.log('日志打印')//log表示日志
window.console.error('错误打印)//错误打印
window.console.info('信息打印)//信息打印
window.console.warn('警告打印)//警告打印
window.console.debug('调试打印)//调试打印弹窗相关方法
- alert 提示框
- prompt 输入框
- confirm 交互框
window.alert('信息窗')//提示窗
var str = prompt('输入框)
console.log(str)
//交互框 返回一个true 确定 或者 false 取消
var is = confirm('你确定要删除吗')
console.log(is)窗口打开关闭的方法
open打开一个新的窗口
//打开的窗口的url路径 对应的打开方式 对应的打开的相关设置
window.open() //不传参会打开一个无标题页面
//传参 第二个参数
//_self 表示本页打开
//_blank 表示新的页面
//传参 第三个参数的相关设置
//fullscreen是否最大化打开。仅IE有效。// height
// widthl
//top
//left
//location是否显示地址栏
// scrollbars内容在视口中显示不下，是否允许滚动
// status是否显示状态栏
// toolbar是否现在工具栏
// menubar是否显示菜单栏
// resizable是否可以通过拖拽浏览器边框改变窗口大小
window.open('http://www.baidu.com','_blank',"width=420,height=230,resizable,scrollbars=yes,status=1")window.open('http://www.baidu.com','_blank','width=200,height=200,ressizable,')close 关闭当前窗口
//关闭当前窗口
window.close()改变窗口大小的方法
- resizeTo
- resizeBy
//直接改变大小到对应的宽高 w100 h100
widow.resizeTo(100,100)
//在原本的基础上增加对应的宽高 w300 h300
widow.resizeBy(200,200)//在原本的基础上加改变窗口位置的方法
- moveTo
- moveBy
//设置对应的位置 x200 y200
window.moveTo(200,200)
//在原本的位置上增加对应的距离 x300 y300
window.moveBy(100,100)改变滚动栏位置的方法
- scrollTo
- scrollBy
//回到顶部将对应的y变为0
//将对应的滚动栏移到对应的位置
window.scrollTo(500,500)
//在原本的基础上进行位置的变化
window.scrollBy(100,100)打印方法
window.print()//调用打印机查找方法
find
//查找方法
window.find()聚焦和失焦(浏览器窗口)
burl
focous
window.burl()//失焦
window.focus()//聚焦属性
获取窗口的父窗口
parent
window.parent//得到对应的父窗口 返回的是窗口对象获取窗口的大小 对应的白色部分
- innerHeight 获取高度
- innerWidth 获取宽度
console.log(window.innerWidth)
console.log(window.innerHeight)3.Document文档对象
document对象是属于BOM的组成部分,他里面的一些相关操作和对应的属性是属于DOM操作,具体的内容我们在对应的DOM中会提到
document表示的是对应的HTML文档,他是用于操作对应HTML文档的
4.Loaction地址栏对象
属性
- hash 获取#后面的值 (重要)
- port 端口号 (重要)
- protocol 协议
- host 主机
- hostname 主机名
- pathname 路径地址
- href 对应的url地址 (重要)
- origin 对应的跨域地址
console.log(location) //相关属性 hash:"" //获取对应的url里面#后面的内容(包含#) console.log(location.hash) host:"127.0.0.1:5500"//主机 ip地址 端口号(域名) hostname:"127.0.0.1"//主机名 对应的ip地址的相关名字 href:"http://127.0.0.1:5500/location//url地址 全部链接地址 可以进行赋值,他赋值对应的url地址,那么就会跳转页面 orgin:// 跨域地址设置(协议 端口号 域名 三者有一个不一样不让访问则产生跨域) pathname://路径名 对应的端口号后面的内容 获取到文件名后缀结束 //浏览器http协议 走的时候80的端口 https协议走的时候 占443端口 port:// 端口号 取值1-65525(1-100的端口一般不会占用 电脑对应的程序占用了) protocol://协议 通信协议 用于通信的 常见的通信相关协议 tcp 连接(网络传输 http(不安全) https(安全)) udp 快递点 search//获取?后面的内容 一般在书写对应的地址的时候,我们一般是不会共用#和?的,如果特殊情况需要共用先写?再写#方法
reload 重新加载 刷新
location.reload() location.reload(false)//里面可以传递一个boolean类型的值 true(慢)表示从服务器重新加载 false(快)表示从本地缓存中加载
assign 指定对应的地址进行跳转(有历史记录可以回退)
location.assign("http://www.baidu.com")//指定跳转对应的地址replace 替换当前的地址跳转到对应的地址(没有历史记录不可以回退)
location.replace("http://www.jd.com")对应的href进行赋值也可以跳转
5.history 历史对象
history里面包含了对应的历史页面,是对于历史页面进行相关操作(页面替换,页面的跳转)
属性
- length 历史页面个数
- state 状态 存储对应的值(重要)
- scrollRestoration 滚动栏恢复行为 (auto manual)
console.log(history.length)//历史页面个数
console.log(history.state)//state状态 里面可以存储对应的数据 默认情况下为null
console.log(history.scrollRestoration)//滚动栏的位置恢复行为 默认为auto keep-alive的底层实现之一
//auto 将恢复用户已滚动到页面上的位置
//manual 未还原页上的位置,用户必须手动滚动到该位置方法
forward 前进
history.forward()//前进back 后退
history.back()//后退go 去任意历史页面(当前页面为0,大于0前进,小于0后退)
history.go(-1)//去任意历史页面 传递值一定为整数 当前页面的值为0 比0大就是前进 比0就后退pushState
//改变当前的url地址(并不会进行跳转 不会刷新操作) state的值（可以是任意类型的数据） 名字（建议空值） url地址
history.pushState('hello','','./history讲解.html') //会产生跨域
//pushState 如果传入对应的url 他会改变对应的url地址 （并非跳转）
//pushState 会新增对应的历史页面
//pushState 会给对应的state进行赋值replaceState
history.replaceState('您好','','./history讲解.html')
//replaceState 不会新增新的历史页面 把当前历史页面进行替换
//replaceState 也会改变对应的url地址 也不会进行跳转（刷新）
//replaceState 也会改变对应的state的值
console.log(history.length);
console.log(history.state);
pushState和replaceState的区别
- pushState或者是replaceState 如果传入对应的url 他会改变对应的url地址 （并非跳转 不会刷新）
- pushState或者replaceState 会给对应的state进行赋值
- pushState 会新增对应新的历史页面 replaceState 不会新增（他会替换当前历史页面）
6.Screen 屏幕对象
属性
- width 屏幕的宽度
- height 屏幕高度
- availHeight 可占用的最大屏幕高度
- availWidth 可占用的最大屏幕宽度
- availLeft 可占用的空间离桌面的左边距离
- availTop 可占用的空间离桌面的上边距离
console.log(screen.width);//获取屏幕宽度
console.log(screen.height);//获取屏幕的高度
console.log(screen.availHeight);//可占用的最大高度
console.log(screen.availWidth);//可占用的最大宽度
console.log(screen.availLeft);//表示当前可占用空间离左边的距离
console.log(screen.availTop);//表示当前可占用空间离上面的距离7.Navigator 导航对象
他主要是用于获取用户浏览器及系统相关的设置以及内容
属性
userAgent 表示当前用户的系统信息以及对应的浏览器信息
//用户相关的系统信息及对应的浏览器信息
console.log(navigator.userAgent);学习BOM核心，就是为了学习后面的路由（路由的底层是BOM)
8.路由（扩展）
路由的核心就是分发，将对应的内容分发对应的路由地址。
前端路由（渲染） 根据对应的路由地址来渲染不同页面
前端路由的分类
页面路由（会进行页面的跳转 页面会刷新）
location.href = 'http://www.baidu.com'
location.assign('http://www.baidu.com')
location.replace('http://www.baidu.com')hash路由（根据对应的hash值来渲染对应的页面 不会进行页面的刷新操作）
//hash值得改变
window.onhashchange = function(){
console.log('hash值变化了');
document.write(location.hash)
}history路由 （根据对应的地址的变化 而渲染对应的页面 不会进行页面的刷新操作）
- 需要对应得pushState调用或者replaceState调用
- 在改变了对应得state值以后 调用对应得forward方法或者是back方法或者是go方法
//其实他得内核还是根据对应得地址得变化 而渲染不一样的内容
window.onpopstate = function(){
console.log('路由触发了');
}SPA 单页应用程序（只有一个页面）里面常用的路由是hash以及history路由
扩展补充内容
在对应的单页应用程序中我们常用vue和react等框架来进行开发，这就导致了我们对应的vue和react中对应的路由模式常用hash模式及history模式（默认设置的路由模式都是hash模式）
后端路由 （业务）
根据对应的路由地址来处理不同的业务（访问不同的接口）
练习:定时跳转案例
<body>
将在<span id="seconds">5s</span>中后跳转页面
<script>
var number = 5
var timer = setInterval(function(){
number --
document.getElementById('seconds').innerText = number + 's'
// if(number == 0){
// clearInterval(timer)
// location.assign('http://www.jd.com')
// }
},1000)
setTimeout(function(){
clearInterval(timer)
location.assign('http://www.jd.com')
},5000)
</script>
</body>
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
