JavaScript 中BOM及window的相关属性及方法

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

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

1.Document 文档对象

document 对象是属于BOM 的组成部分，相关操作和对应的属性是属于DOM操作。
document表示的是对应的HTML文档，用于操作HTML文档。

2.Location 地址栏对象（重点）

属性

1.hash 获取#后面的值（重点）

// hash: "" //hash获取对应的url里面#后面的内容 (包含#)
console.log(location.hash)

2.search 获取?后面的值（重点）

// search 获取对应的url里面?后的内容
console.log(location.search);
//一般在书写对应的地址的时候 我们一般是不会共有#和? 如果需要共有先写?后面再接#

3.href 对应的url地址（重点）

// 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'

4.host 主机

// host: " .0.0.1:5500" //主机（域名）包括（ ip地址 端口号）
console.log(location.host);

5.hostname 主机名

// hostname: "127.0.0.1" //主机名 对应的ip的相关名
console.log(location.hostname);

6.port 端口号

// port: "5500"
console.log(location.port) //端口号 1-65525 （1-100的端口一般不会占用 电脑对应的程序占用了）
//浏览器http协议 走的时候80的端口 https协议走的时候 占443端口

7.protocol 协议

// protocol: "http:
//协议 通信协议 用于通信的 常见的通信相关协议 tcp（网络传输 http（不安全） https（安全））连接   // udp 快递点
console.log(location.protocol);

8.pathname 路径地址

// pathname: "/location%E5%AF%B9%E8%B1%A1%E8%AE%B2%E8%A7%A3.html" //路径名 就是对应的端口号后面的内容
console.log(location.pathname)//获取到文件名后缀结束

9.origin 对应的跨域地址

// origin: "http://127.0.0.1:5500" //跨域地址设置（协议 端口号 域名 三者有一个不一样不让访问 产生跨域）
console.log(location.origin);

方法

1.reload 重新加载

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

2.assign 指定对应的地址进行跳转（有网页历史记录）

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

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

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

3.history 历史对象（重点）

history他里面包含了对应的历史页面，他是对于历史页面进行相关操作（页面替换，页面的跳转）

属性

1.state属性（状态存储对应的值）(重点)

console.log(history.state);//state状态 他里面可以存储对应的数据 默认请求为null

2.length属性（历史页面个数）

console.log(history.length);//历史页面个数

3.scrollRestoration （滚动栏恢复行为 auto、 manual）

auto 将恢复用户已滚动到的页面上的位置。

manual 未还原页上的位置。用户必须手动滚动到该位置。

console.log(history.scrollRestoration);//滚动的位置恢复行为 默认为auto keep-alive的底层实现之一

方法

1.forward 前进

history.forward()//前进

2.back 后退

history.back()//后退

3.go 去任意历史页面（当前页面为0 大于0前进小于0后退）

history.go(-1)//去任意历史页面 传递值一定为整数 当前页面的值为0 比0大就是前进 比0就后退

4.pushState

//改变当前的url地址(并不会进行跳转 不会刷新操作) state的值（可以是任意类型的数据） 名字（建议空值） url地址
history.pushState('hello','','./history讲解.html') //会产生跨域
//pushState 如果传入对应的url 他会改变对应的url地址 （并非跳转）
//pushState 会新增对应的历史页面
//pushState 会给对应的state进行赋值

5.replaceState

//改变当前的url地址(并不会进行跳转 不会刷新操作) state的值（可以是任意类型的数据） 名字（建议空值） url地址
history.replaceState('您好','','./history讲解.html')
//replaceState 不会新增新的历史页面 把当前历史页面进行替换
//replaceState 也会改变对应的url地址 也不会进行跳转（刷新）
//replaceState 也会改变对应的state的值

4.Screen 屏幕对象

属性

console.log(screen.width);//获取屏幕宽度console.log(screen.height);//获取屏幕的高度console.log(screen.availHeight);//可占用的最大高度console.log(screen.availWidth);//可占用的最大宽度console.log(screen.availLeft);//表示当前可占用空间离左边的距离console.log(screen.availTop);//表示当前可占用空间离上面的距离

5.Navigator 导航对象

属性

userAgent 表示当前用户的系统信息以及对应的浏览器信息（重点）

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

window的相关属性及方法

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

属性

1.获取窗口的父窗口 parent

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

2.innerHeight 获取高度 innerWidth 获取宽度

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

方法

1.控制台打印方法

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

2.弹窗相关方法

alert 提示框

window.alert('提示窗')//提示窗

prompt输入框

var str = prompt('输入框') //输入框 点击确认返回输入的内容 点击取消返回null
console.log(str);

confirm 交互框

//交互框 返回一个true 确定 或者false 取消
var is = confirm('你确定要删除吗?')
console.log(is);

3.窗口打开关闭的方法

open 打开一个新的窗口

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

close 关闭当前窗口

//关闭当前窗口
window.close()

4.改变窗口大小的方法

resizeTo

//直接改变大小到对应的宽高 w 100 h 100
window.resizeTo(100,100)

resizeBy

//在原本的基础上增加对应的宽高 w 300 h 300
window.resizeBy(200,200)

5.改变窗口位置的方法

moveTo

//设置对应的位置 X 200 Y 2O0
window.moveTo(200,200)

moveBy

//在原本的位置上增加对应的距离 X 300 Y 300
window.moveBy(100,100)

6.改变滚动栏位置的方法

scrollTo

//将对应的滚动栏移到对应的位置
window.scrollTo(500,500)

scrollBy

//在原本的基础上进行位置的变化
window.scrollBy(100,100)

7.打印方法

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

8.查找方法

//查找方法
window.find()

9.窗口聚焦和失焦的方法

blur

//失去焦点
window.blur()

focus

//聚焦
window.focus()

路由（扩展）

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

1.前端路由（渲染）

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

页面路由（会进行页面的跳转页面会刷新）

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模式）

后端路由（业务）

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