Day08 BOM

概述：

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

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

Frames(子窗口实际它也是一个window)，Navigator导航对象,Screen屏幕对象，Document文档对象，Location地址栏对象，History历史对象

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('调试打印') //调试

弹窗相关方法

属性

Location 地址栏对象 （*）

• 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,scro
  llbars=yes,status=1")

  close 关闭当前窗口

  //关闭当前窗口
  

  改变窗口大小的方法

• resizeTo

• resizeBy

  //设置对应的位置 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 调用打印机
  

  查找方法

  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文档。

• 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 表示当前用户的系统信息以及对应的浏览器信息

//用户相关的系统信息及对应的浏览器信息

学习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)
}

SPA 单页应用程序（只有一个页面）里面常用的路由是hash以及history路由

扩展补充内容

在对应的单页应用程序中我们常用vue和react等框架来进行开发，这就导致了我们对应的vue和react中 对应的路由模式常用hash模式及history模式（默认设置的路由模式都是hash模式）

后端路由 （业务）

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