概述
Bom 浏览器对象模型,他是用于操作浏览器相关内容的
Bom是一个缺乏规范的东西,为了保证他的规范性产生了一系列共用对象来解决这个问题.但是这些共用对象存在对应的兼容问题,直到W3c介入,他的兼容得到了保障
Window的相关属性和方法
概述:window属于浏览器的global对象(顶层对象).所有的全局函数及全局变量都属于window
方法
控制台打印方法
console.log()
console.error()
console.info()
console.warn()
console.debug()
弹窗相关方法
alert 提示框
prompt 输入框
confirm 交互框
窗口打开关闭的方法
open 打开一个新的窗口
close 关闭当前窗口
改变窗口大小的方法
resizeTo
resizeBy
改变窗口位置的方法
moveTo
moveBy
改变滚动栏位置的方法
scrollTo
scrollBy
查找方法
find
窗口聚焦和失焦的方法
window.blur() 失焦
window.focus() 聚焦
属性
获取窗口的父窗口 parent
innerHeight 获取高度 innerWidth 获取宽度
Document 文档对象
document对象是属于BOM的组成部分,他里面的一些的相关操作和对应的属性是属于DOM操
作,具体的内容在对应的DOM中会提到。
document表示的是对应的HTML文档,他是用于操作对应HTML文档。
Location 地址栏对象
属性
hash 获取#后面的值
search 获取?后面的值
port 端口号
protocol协议
host 主机
hostname 主机名
pathname 路径地址
href对应的url地址
origin对应的跨域地址
方法
reloaed 重新加载
assign 指定对应的地址进行跳转(有历史)
replace 替换当前的(没有历史)
对应的href进行赋值也可以进行跳转
history 历史对象 (*)
概述:history他里面包含了对应的历史页面,他是对于历史页面进行相关的操作(页面替换,页面的跳转)
属性
length属性(历史页面个数)
state属性(状态 存储对应的值)
scrollRestoration(滚动栏恢复行为auto.manual)
方法
forward 前进
back后退
go 去任意历史页面(当前页面为0,大于0前进 小于0后退)
pushState
改变当前的url地址(并不会进行跳转 不会刷新操作) state的值(可以是任意类型的数据) 名字(建议空值) url地址,会产生跨域,如果传入对应的url 他会改变对应的url地址 (并非跳转),会新增对应的历史页面,会给对应的state进行赋值
replaceState
不会新增历史对象,把当前历史页面进行替换也会改变对应的url地址 也不会进行跳转(刷新) 也会改变对应的state的值
pushState和replaceState的区别
pushState或者是replaceState 如果传入对应的url 他会改变对应的url地址 (并非跳转 不会刷新)
pushState或者replaceState 会给对应的state进行赋值
pushState 会新增对应新的历史页面 replaceState 不会新增(他会替换当前历史页面)
Screen 屏幕对象
属性
width 屏幕的宽度
height 屏幕高度
availHeight 可占用的最大屏幕高度
availWidth 可占用的最大屏幕宽度
availLeft 可占用的空间离桌面的左边距离
availTop 可占用的空间离桌面的上边距离
Navigator 导航对象
概述:他主要是用于获取用户浏览器及系统相关的设置以及内容
属性
userAgent 表示当前用户的系统信息以及对应的浏览
学习BOM核心,就是为了学习后面的路由(路由的底层BOM)
路由(扩展)
路由的核心就是分发,将对应的内容分发对应的路由地址。
前端路由(渲染)
根据对应的路由地址来渲染不同页面
前端路由的分类
页面路由(会进行页面的跳转 页面会刷新)
hash路由(根据对应的hash值来渲染对应的页面 不会进行页面的刷新操作)
history路由 (根据对应的地址的变化 而渲染对应的页面 不会进行页面的刷新操作)
需要对应得pushState调用或者replaceState调用
在改变了对应得state值以后 调用对应得forward方法或者是back方法或者是go方法
SPA 单页应用程序(只有一个页面)里面常用的路由是hash以及history路由
扩展补充内容
在对应的单页应用程序中我们常用vue和react等框架来进行开发,这就导致了我们对应的vue和react中
对应的路由模式常用hash模式及history模式(默认设置的路由模式都是hash模式)
后端路由 (业务)
根据对应的路由地址来处理不同的业务(访问不同的接口)