08 BOM

概述:    BOM(全称bowser object model)浏览器对象模型,他是用于操作浏览器相关的内容.

BOM的共有对象及相关的结构
    Frames(子窗口实际它也是一个window)                    Document(文档对象)

    Navigator 导航对象                window窗口        Location(地址栏对象)

    Screen 屏幕对象                            History(历史对象)

window的相关属性及用法
    概述:    window属于浏览器的global对象(顶层对象).所有的全局变量都是属于window.window可以被省略

    方法:
        控制台打印方法
            1.console.log()    (日志打印)
            2.console.error()    (错误打印)
            3.console.info()    (信息打印)
            4.console.warn()    (警告打印)
            5.console.debug()    (调试打印)

    弹窗相关方法
        1.alert        提示框
        2.prompt        输入框(点击确认返回输入的值,点击取消返回null)
        3.confirm        交互框(返回一个true或false)

    窗口打开关闭的方法
        open 打开一个新的窗口
        close 关闭当前窗口
    
    改变窗口大小的写法
        1.resizeTO(直接改对应的大小)
        2.resizeBy(在原有的基础上增加)

    改变窗口位置的方法
        1.moveTO(直接改变对应的位置)
        2.moveBy(在原本的基础上增加)

    改变滚动栏位置的方法
        1.scrollTo(将滚动栏移到对应的位置)
        2.scrollBy(在原有的基础上进行移动)

    打印方法
        print

    查找方法
        find
    
    窗口聚焦和失焦的方法
        1.window.blue()失焦
        2.window.focus()聚焦

    属性
        1.获取窗口的父窗口parent
        2.innerHeight 获取高度  innerWidth 获取宽度

Document文档对象
    1.document对象是属于BOM的组成部分,它里面的一些相关操作和对应的属性是属于DOM操作,具体的内容在对应的DOM中会提到.
    2.document表示的是对应的HTML文档.他是用于操作对应HTML文档.

Location 地址对象
    1.hash 获取#后面的值
    2.search 获取?后面的值
    3.port 端口号
    4.protocol 协议
    5.host 主机
    6.hostname 主机名
    7.partname 路劲地址
    8.href 对应的地址
    9.origin 对应的跨域地址

方法
    1.reload 重新加载
    2.assign 指定对应的地址进行跳转
    3.replace 替换当前的地址进行跳转
    
    对应的href进行赋值也可以跳转

History对象
    概述:    history它里面包含了对应的历史页面,它是对于历史页面进行相关操作(页面的替换,页面的跳转)
    
    属性:
        1.length属性 (历史页面的个数)
        2.state属性 (状态 储存对应的值  默认请求为null)
        3.scrollRestoration(滚动栏恢复行为 auto(自动) manual(手动))
    方法:
        1.forward        前进
        2.back        后退
        3.go        去任意历史页面(当前页面为0,大于0前进,小于0后退)
        4.pushState    改变当前的url地址(并不会进行跳转,不会刷新) state的值 (可以是任意类型数据) 名字(建议空) url地址
        5.replaceState    
    pushState和replaceState的区别
        1.两者如果传入对应的url,他会改变url地址(并非跳转 不会刷新)
        2.两者都会给state进行赋值
        3.pushState会增加对应新的历史页面  replaceState则不会增加(他会替代当前的历史页面)

Screen屏幕对象
    属性:
        1.width        屏幕的宽度
        2.height        屏幕的高度
        3..availHeight    可占用的最大屏幕高度
        4.availWidth    可占用的最大屏幕的宽度
        5.availLeft    可占用的空间离桌面左边的距离
        6.availTop    可占用的空间离桌面顶部的距离

Navigator导航属性
    概述:它主要是用于获取用户名浏览器及相关的设置以及内容
    属性:
        userAgent 表示当前用户的系统信息以及对应的浏览器信息

学习BOM核心,就是为了学习后面的路由(路由的底层BOM)

路由(拓展)
    路由的核心就是分发，将对应的内容分发对应的路由地址。
    前端路由（渲染）
    根据对应的路由地址来渲染不同页面
    前端路由的分类
    页面路由（会进行页面的跳转 页面会刷新）
    hash路由（根据对应的hash值来渲染对应的页面 不会进行页面的刷新操作）
    history路由 （根据对应的地址的变化 而渲染对应的页面 不会进行页面的刷新操作）
    需要对应得pushState调用或者replaceState调用
    在改变了对应得state值以后 调用对应得forward方法或者是back方法或者是go方法
    SPA 单页应用程序（只有一个页面）里面常用的路由是hash以及history路由
    扩展补充内容
    在对应的单页应用程序中我们常用vue和react等框架来进行开发，这就导致了我们对应的vue和react中
    对应的路由模式常用hash模式及history模式（默认设置的路由模式都是hash模式）
    后端路由 （业务）
    根据对应的路由地址来处理不同的业务（访问不同的接口）
    

location.href = 'http://www.baidu.com'
    location.assign('http://www.baidu.com')
    location.replace('http://www.baidu.com')
    //hash值得改变
    window.onhashchange = function(){
    console.log('hash值变化了');
    document.write(location.hash)
    }
    //其实他得内核还是根据对应得地址得变化 而渲染不一样的内容
    window.onpopstate = function(){
    console.log('路由触发了');
    }