js关于BOM

1.概述

BOM 是Browser Object Model的缩写，简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象，用于访问浏览器的功能。BOM由一系列相关的对象构成，并且每个对象都提供了一些方法与属性. 我们可以通过这些属性和方法去对浏览器进行操作。

2.window对象

//bom称为浏览器对象模型(bowser object model)，可以获取浏览器上所有的内容及相关操作
//window对象
console.log(window);//对象和window的构造函数
//常用的弹窗方法及打印方法
window.console.log('hello')//window 可以省略
console.log('日志');//控制台 log日志 以日志的形式打印
//以错误的形式打印
console.error('错误');
console.warn('警告');
//弹窗
window.alert('hello')
var isTrue=confirm('你确定要删除吗？')//交互框 true确认 false取消 返回
console.log(isTrue);
var str=prompt('请输入你的手机号')//输入框 返回的是string类型
//打开 关闭
//第一个参数是url地址，第二个是参数为title标题 target是设置打开方式，第三个参数为设置参数的（窗口的高度 宽度等）
window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0')    
// 移动窗口位置
window.moveBy(100,100) //X+100 Y+100 移动位置
window.moveTo(200,200)  //从当前位置移动
//改变对应窗口大小
window.resizeBy(200,200)//改变大小
window.resizeTo(200,200) //从当前修改大小
//print打印方法
window.print()
window.focus()//聚焦
window.blur()//失去焦点
//滚动条栏位置改变
        window.scrollBy(100,100)//在原本位置上面移动
        window.scrollTo(0,550)//到达位置 回到顶部

3.location

//location
        console.log(location.hash); //哈希 #后面带的值和search不能同时使用
        console.log(location.host); //主机 域名 ip地址+端口号
        console.log(location.hostname);//主机名 ip地址
        console.log(location.protocol);//协议 用于通信 （基于tcp/ip）http（明文传输）https（安全，加密）
        console.log(location.port);//端口号 1--65525 (1-100的端口号被电脑占用)http默认的端口号80 https默认端口443
        console.log(location.href);//链接的地址，也可以设置
        console.log(location.search);//？后面带的值 一般是get请求传输数据的时候
        console.log(location.origin);//跨域
        console.log(location.pathname);//路径名 获取的除了协议和ip地址
        //使用href来跳转页面  通过更改路径地址来实现跳转
        //location.href='http://www.baidu.com'
        //相关方法
        location.assign('http://www.4399.com')//跳转页面 保存历史记录
        //替换
        location.replace('http://www.weibo.com')//直接替换
        //重新加载页面
        function fn(){
            location.reload(true)//参数是boolean类型的值 true（从服务器加载） false（从缓存中加载）
        }

4.history

//length 历史页面个数，只能记录本页面中跳转的次数，其他页面只有在跳转到本页面后才记录
        console.log(history.length);//要记
        //scrollRestoration 滚动恢复属性 auto:自动 manual:手动操作 (keep-alive 缓存)
        console.log(history.scrollRestoration);
        //state 状态值 null
        console.log(history.state); //要记
        function fn(){
            history.forward()//前进
        }
        function fn1(){
            history.back()//后退
        }
        function fn2(){
            history.go(1)//去任意页面，0就是自己，小于0，后退，大于0前进
        }
        function fn3(){
            //添加state的值 数据 "" 地址 
            history.pushState('hello','','./index.html')
            //会改变地址，但是不会刷新，会推一个页面到历史区，价值更高
        }
        function fn4(){
            history.replaceState('world','','dizhi')//会改变地址，但是不会刷新，在历史区直接修改当前这个页面
        }

5.hash

window.onhashchange=function(){
            console.log('hash值变了');
        }
        window.onpopstate=function(){
            console.log('路由改变了');
        }
        function fn(){
            history.pushState('hello','')
        }

6.frame screen navigator

console.log(frames);//所有的iframe标签 实际返回一个window
        console.log(screen);//宽高属性
        //多端适配 1.媒体查询 2，rem 3.实时设置
        console.log(screen.availHeight);//高属性 可占用最大的高度
        console.log(screen.availWidth);//宽属性 可占用最大的宽度
        //获取浏览器及系统的相关内容
        console.log(navigator);
        console.log(navigator.userAgent);//用户浏览设置信息

7.路由：前端路由、后端路由

• 后端路由：根据对应的接口地址来访问不同的功能（后端路由restful风格（接口的风格））

• 前端路由：根据不同的访问路径（path）来渲染不同的内容（组件）

1.页面路由（跳转页面，刷新操作）

location.href

location.assign()

location.replace()

history.back()

history.forward()

2.hash路由（使用hash来实现，后面必须要带上# ，不会刷新页面

通过hash的改变来改变对应的渲染内容（时间监听 onhashchange)

3.H5路由（history里面state进行监听）（常用SPA（单页应用程序））

history.pushState()加一个历史页面（地址变了，不会刷新）

history.replaceState()替换历史页面（地址变量 不会刷新）

也是通过事件进行监听（onpopstate）

在对应的框架学习中，路由的底层写法主要采用hash以及H5的方式(vue react)默认是路由模式hash vue中路由有几种模式

hash模式和history模式