BOM

Day08 BOM

概述：

BOM (全称bowser object model) 浏览器对象模型，他是用于操作浏览器相关的内容。BOM是一个缺乏规范的东西，为了保证他的规范性产生了一系列的共用对象来解决这个问题。沿用至今，但是这些共有对象也存在对应的兼容问题，直到w3c的介入（ie 10以后）。他的兼容问题得到了保证。

BOM的共有对象及相关的结构

 

window的相关属性及方法

概述：window属于浏览器的global对象（顶层对象）。所有的全局函数及全局变量都是属于window的。（window可以被省略）

方法

控制台打印方法

  • console.log()

  • console.error()

  • console.info()

  • console.warn()

  • console.debug()

//window的控制台打印方法
// window.console 表示浏览器的控制台
window.console.log('日志打印') //log表示日志
console.error('错误打印') //错误打印
console.info('信息打印') //信息打印
console.warn('警告打印') //警告
console.debug('调试打印') //调试
弹窗相关方法

  • alert 提示框

  • prompt 输入框

  • confirm 交互框

window.alert('提示窗')//提示窗
var str = prompt('输入框') //输入框 点击确认返回输入的内容 点击取消返回null
console.log(str);
//交互框 返回一个true 确定 或者false 取消
var is = confirm('你确定要删除吗?')
console.log(is);
窗口打开关闭的方法

open 打开一个新的窗口

//打开窗口的url路径（url） 对应的打开方式（target） 对应的打开窗口的相关设置 （option）
// 第二个参数
//  _self表示本页打开
//  _blank表示新的页
// window.open() 不传参会打开一个无标题页面
// 传参 第三个参数的相关设置
// fullscreen 是否最大化打开。仅IE有效。
// height
// width
// top
// left
// location 是否显示地址栏
// scrollbars 内容在视口中显示不下，是否允许滚动
// status 是否显示状态栏
// toolbar 是否现在工具栏
// menubar 是否显示菜单栏
// resizable 是否可以通过拖拽浏览器边框改变窗口大小
window.open('http://www.baidu.com','_blank',"width=420,height=230,resizable,scrollbars=yes,status=1")

close 关闭当前窗口

//关闭当前窗口
window.close()
改变窗口大小的方法

  • resizeTo

  • resizeBy

//直接改变大小到对应的宽高 w 100 h 100
window.resizeTo(100,100)
//在原本的基础上增加对应的宽高 w 300 h 300
window.resizeBy(200,200)
改变窗口位置的方法

  • moveTo

  • moveBy

//设置对应的位置 X 200 Y 2O0
window.moveTo(200,200)
//在原本的位置上增加对应的距离  X 300 Y 300
window.moveBy(100,100)
改变滚动栏位置的方法

  • scrollTo

  • scrollBy

//改变滚动栏位置的方法
//回到顶部 将对应的y变为0
//将对应的滚动栏移到对应的位置
window.scrollTo(500,500)
//在原本的基础上进行位置的变化
window.scrollBy(100,100)
打印方法

  • print

//打印方法 print 调用打印机
window.print()
查找方法

  • find

//查找方法
window.find()
窗口聚焦和失焦的方法

  • window.blur() 失焦

  • window.focus() 聚焦

//失去焦点
window.blur()
//聚焦
window.focus()

属性

  • 获取窗口的父窗口 parent

window.parent //得到对应的父窗口

  • innerHeight 获取高度 innerWidth 获取宽度

//获取窗口的大小 获取宽高 对应的白色部分
console.log(window.innerHeight)
console.log(window.innerWidth)

Document 文档对象

  • document对象是属于BOM的组成部分，他里面的一些的相关操作和对应的属性是属于DOM操作，具体的内容在对应的DOM中会提到。

  • document表示的是对应的HTML文档，他是用于操作对应HTML文档。

Location 地址栏对象 （*）

属性

  • hash 获取#后面的值 *

  • search 获取?后面的值 *

  • port 端口号

  • protocol 协议

  • host 主机

  • hostname 主机名

  • pathname 路径地址

  • href 对应的url地址 *

  • origin 对应的跨域地址

//相关的属性
// hash: "" //hash获取对应的url里面#后面的内容 (包含#)
console.log(location.hash)
// host: "127.0.0.1:5500" //主机 ip地址 端口号 （域名）
console.log(location.host);
// hostname: "127.0.0.1" //主机名 对应的ip的相关名
console.log(location.hostname);
// href: "http://127.0.0.1:5500/location%E5%AF%B9%E8%B1%A1%E8%AE%B2%E8%A7%A3.html"
console.log(location.href) //url地址 全部链接地址
//href也可以进行赋值 他的赋值就是将对应的url地址 那么就会跳转页面
// location.href = 'http://www.taobao.com'
// origin: "http://127.0.0.1:5500" //跨域地址设置（协议 端口号 域名 三者有一个不一样不让访问 产生跨域）
console.log(location.origin);
// pathname: "/location%E5%AF%B9%E8%B1%A1%E8%AE%B2%E8%A7%A3.html" //路径名 就是对应的端口号后面的内容
console.log(location.pathname)//获取到文件名后缀结束
// port: "5500"
console.log(location.port) //端口号 1-65525 （1-100的端口一般不会占用 电脑对应的程序占用了）
//浏览器http协议 走的时候80的端口 https协议走的时候 占443端口
// protocol: "http:
//协议 通信协议 用于通信的 常见的通信相关协议 tcp（网络传输 http（不安全） https（安全）） 连接 udp 快递点
console.log(location.protocol);
// search 获取?后的内容 
console.log(location.search);
//一般在书写对应的地址的时候 我们一般是不会共有#和? 如果需要共有先写?后面再接#

方法

  • reload 重新加载

//相关的方法
// reload 重新加载 刷新
// location.reload()
//里面可以传递一个boolean类型的值 true 表示从服务器重新加载（慢） false 从本地缓存中加载（快）
location.reload(false)

  • assign 指定对应的地址进行跳转（有历史）

//指定跳转对应的地址 有历史记录
location.assign('http://www.weibo.com')

  • replace 替换当前地址进行跳转 （没有历史）

// replace 替换当前的地址跳转到对应的地址 没有历史记录
location.replace('http://www.jd.com')

对应的href进行赋值也可以跳转

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 不会新增（他会替换当前历史页面）

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);//表示当前可占用空间离上面的距离

Navigator 导航对象

概述：他主要是用于获取用户浏览器及系统相关的设置以及内容

属性

  • userAgent 表示当前用户的系统信息以及对应的浏览器信息

//用户相关的系统信息及对应的浏览器信息
console.log(navigator.userAgent);

学习BOM核心，就是为了学习后面的路由（路由的底层BOM）

路由（扩展）

路由的核心就是分发，将对应的内容分发对应的路由地址。

前端路由（渲染）

根据对应的路由地址来渲染不同页面

前端路由的分类
页面路由（会进行页面的跳转 页面会刷新）
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模式）

后端路由 （业务）

根据对应的路由地址来处理不同的业务（访问不同的接口）

posted @ 2022-11-16 20:07  落尘寰  阅读(165)  评论(0)    收藏  举报