day08:BOM

ZMiLey

已于 2023-04-18 19:00:16 修改

阅读量103

点赞数

文章标签： javascript 前端 vue.js

于 2023-02-17 20:00:36 首次发布

本文链接：https://blog.csdn.net/ZMiLey/article/details/129034237

版权

BOM

概述：

BOM(全称bowser object model)浏览器对象模型，主要用于操作浏览器相关的内容（调用浏览器相关的功能及获取浏览器携带的内容），BOM是JavaScript的重要组成内容，但是他缺少规范，所以它是通过共有对象来解决没有规范的问题。（前面BOM相关内容没有加入W3C导致兼容问题）。IE的bom对象里面的相关参数及方法是最多的，由于是共有对象所以也被其他浏览器所采用

BOM的共有对象

window 窗口对象（浏览器的global对象全局对象）

location 地址栏对象

history历史对象

navigator 导航对象（浏览信息对象）

screen 屏幕对象（适配用）

doucument 文档对象

frames 框架对象（也是window）

window 其他所有的对象都是window对象的属性 window可以被省略

概述

window 窗口对象，它是浏览器的global对象全局对象，包含了所以的全局变量

属性

caches 返回一个缓存对象 CatheStorage 此对象激活了诸如存储用于离线使用的资源，并生成对请求的自定义响应等功能。

cookieStore 存储cookie的空间

indexedDB 浏览器内置数据库对象用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））

localStorage 本地存储

sessionStorage session生命周期本地存储

closed 是否关闭

crossOriginlsolated cors设置（跨域设置）

console 控制台

chrome 谷歌内核属性

innerHeight 窗口可操作区域的高度

innerWidth 窗口可操作区域的宽度

scrollX scrollY 滚动栏的坐标

方法

控制台打印方法打印方法

        // 控制台打印方法
        console.log('日志打印')//日志打印
        console.error('错误打印')//错误打印
        console.warn('警告打印')//警告打印
        console.info('信息打印')//信息打印
        console.debug('调试打印')//调试打印
        console.group('分组打印')//分组打印
        console.table('表格打印')//表格打印

弹窗方法

alert 弹信息窗没有返回值

prompt 弹输入窗有返回值会返回输入的内容是一个String类型

confirm 弹选择框有返回值返回为Boolean类型

        console.log(alert('hello'))
        console.log(prompt('请输入'))
        console.log(confirm('请问你是否是单身'))

打开窗口的方法 open

关闭窗口的方法 close（关闭当前窗口）

        document.getElementById('openbtn').onclick = function(){
            //打开的url路径地址 打开的方式(a标签的target一致) 打开时的配置(使用=号赋值 使用,号隔开)
            window.open('http:www.baidu.com','_blank','width=200,height=200')

        }
        document.getElementById('closebtn').onclick = function(){
            //打开的url路径地址 打开的方式(a标签的target一致) 打开时的配置(使用=号赋值 使用,号隔开)
            window.close()
            
        }

改变窗口的位置的方法

moveto

moveby

        //moveTo 给定实际坐标 moveBy给定变化的距离
        window.moveTo( 30,30)//到达30, 30的坐标
        window.moveBy(20, 20)//10 10变成 30,30的坐标l / resizeTo 给定实际大小resizeBy在当前下发生变化

改变窗口大小的方法

        window.resizeTo(30, 30)//大小改为width 30 height 30大小
        window.resizeBy(30, 30)//原本的width增加30原本的height也增加3ol l scrollTo scrollBy

改变的滚动栏位置的方法（*）

        document.getElementById('scrollToBtn').onclick = function () {
            window.scrol1To(300, 300)//滚动栏x轴到达30 y轴到达30
            console.log(window.scrollX, window.scrol1Y)
        }
        document.getElementById('scrollByBtn').onclick = function () {
            window.scrollBy(300, 300)//滚动栏x轴到达30 y轴到达30
            console.log(window.scrollx, window.scrol1Y)
        }

打印机功能调用 print打印方法（*）
print (打印的基础实现)

        //打印功能
        window.print()

find查找

        //find查找
        window.find()

获取焦点和失去焦点

        //获取焦点和失去焦点
        window.focus()
        window.blur()

fetch 异步的请求 Axios的底层实现(内核为xhr）

        //fetch 异步的请求 Axios的底层实现(内核为xhr）
        var obj = window.fetch("http://www.baidu.com")
        console.log(obj)

Location（*）

概述

location是地址栏对象，可以获取地址栏上的所有信息


https://www.aliyundrive.com/s/dKU6qfyTgyW/folder/63ecc4b8a5b847fcc18e454d9cfef5cca4c58b0e

http://协议

域名 www.aliyundrive.com
（解析IP+端口号）

浏览器访问根据不同的协议指定不同的端口号 80端口http 443端口https

/s/dKU6qfyTgyW/folder/63ecc4b8a5b847fcc18e454d9cfef5cca4c58b0e等等为路径地址

?后面是传递参数（get请求）

location的相关属性（都支持赋值）

hash获取#后面携带的内容（#通常放在最后面）

host 主机 IP地址+端口号

hostname 主机名 IP地址

href url路径

port 端口号

pathname 路径名

search 获取?后面传递的参数

protocol 协议

origin 跨域地址

ancestorOrigins 获取倒序排列的文档对象及来源的浏览器上下文（插件开发中使用）

        console.log(location)
        //获取hash前面带#(一般写在最后面)
        console.log(location.hash)
        //默认自己添加#
        location.hash = 'abc'
        console.log(location.host)
        //location == 127.0.0.1
        // location.host = "123.123.123.123:8080" 一般不建议设置
        console.log(location.hostname)//主机名其实是一个Ip地址
        console.log(location.href)//路径
        //跳转页面
        //location.href = 'http:www.baidu.com'//不会产生历史页面
        console.log(location.origin)
        console.log(location.port)//
        //获取?后面的内容 里面的写法为key = value&key=value
        console.log(location.search)
        location.search = 'name=jack&age=19'
        //http(不安全 文明 80)及https(安全 加密 443(openssl(对称加密 非对称加密 hash函数等等)))
        console.log(location.protocol)//协议
        //只读属性 返回的是一个domstring对象
        console.log(location.ancestorOrigins)

location的方法

assgin 跳转页面（会产生历史页面）

replace 替换URL跳转页面

reload 重新加载页面


        //获取元素
        document.getElementById('btn1').onclick=function(){
            location.assign('http://www.baidu.com')
        }
        //等同于href赋值
        document.getElementById('btn2').onclick=function(){
            location.replace('http://www.baidu.com')
        }
        document.getElementById('btn3').onclick=function(){
            location.reload()
        }

练习

        //将https://www.baidu.com/s?ie=UTF-8&wd=mdn&tn=15007414_dg里面的每个key:value提取组成一个对象
       
        
        function getUrlParams(url){
            url = url.split(/\?/)[1]
            var param = {}
            //使用&符号进行分割
            var params = url.split('&')//数组
            //遍历数组
            for(var paramStr of params){
                var arr = paramStr.split('=')
                //arr这个数组第一个为key 第二个为value
                param[arr[0]] = arr[1]
            }
            return param
        }
        console.log(getUrlParams('https://www.baidu.com/s?ie=UTF-8&wd=mdn&tn=15007414_dg'))

history(*)

概述

history对象是历史对象，他记录所有的历史页面

history的属性

length 历史页面的个数（包含当前页面）

state 值（默认为null）

scrollRestoration 滚动恢复属性（auto || manual）

history的方法

forward 前进

back 后退

go 去任意历史页面

pushstate 添加一个state（新增历史页面）

replacestate 替换state（不会新增历史页面）

    
    <a href="http:www.baidu.com">去百度</a>
    <button id="forward">前进</button><button id="back">后退</button><button id="go">任意跳转</button>
    <button id="pushstate">pushstate</button>
    <button id="replacestate">replacestate</button>
    <script>
        console.log(history)
        console.log(history.length)
        console.log(history.state)
        console.log(history.scrollRestoration)
        //常用的方法 前进 后退 任意跳转 事件会自动传递参数 参数叫event
        document.getElementById('forward').onclick = function(){
            history.forward()
        }
        document.getElementById('back').onclick = function(){
            history.back()
        }
        document.getElementById('go').onclick = function(){
            //0区间 0是自己 1为前进 -1为后退
            history.go(1)
        }
        //pushState添加一个state(新增历史页面) 在本地
        document.getElementById('pushstate').onclick = function(){
            //第一个参数为参数 state的数据值 第二个 unsend 常用值为"" 第三个为url 改变的url

            history.pushState('hello',"",'./location对象讲解.html')
            console.log(history.state)
            console.log(history.length)
        }
        //replaceState添加一个state(不会新增历史页面)
        document.getElementById('replacestate').onclick = function(){
            //第一个参数为参数 state的数据值 第二个 unsend 常用值为"" 第三个为url 改变的url
            history.replaceState('hello',"",'./location对象讲解.html')
            console.log(history.state)
            console.log(history.length)

        }

pushstate以及replacestate都会进行操作

会影响state值也会改变url地址但是不会跳转页面（页面不会刷新）

navigator

概述

navigator 属于浏览器的导航对象，里面包含了浏览器的相关信息以及你的系统信息。

属性

userAgent 用户信息

appName

appVersion

language(国际化)

        //携带 浏览器版本信息及系统版本信息兼容
        console.log(navigator.userAgent) //用户相关信息
        console.log(navigator.appName) //应用名
        console.log(navigator.appVersion) //应用版本
        console.log(navigator.language) //语言 zh-CN

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) //可视区离边上的距离

document

概述

document是文档对象指代整个html文档 (JavaScript不包括)包含用于操作对应的html文档的相关内容。他是整个DOM里面最大的对象，但它属于B

属性

body获取body

forms 获取所有的表单

head 获取head

        //body获取body
        console.log(document.body)
        //forms 获取所有的表单
        console.log(document.forms)
        //head 获取head
        console.log(document.head)

BOM是路由的底层实现，所有的前端js框架的路由底层都是BOM

路由

概述

根据不同的URL地址渲染不同的内容，主要分前端路由和后端路由

后短路由

后端介绍

后端主要提供数据进行相关的业务处理，后端主要用到java，PHP，node.js等语言

后端路由

接口路由（json格式 restful接口）

根据不同的接口返回不同的数据

渲染路由（ssr服务器渲染前后端不分离）

根据不同的url地址来渲染不同的页面（后端服务器压力大）

优点

利于seo （搜索引擎优化）
首页渲染速度快（主页都是做ssr）

缺点

服务器压力大
维护不便

前端路由
根据不同url地址来渲染不同的页面（浏览器解析）
前端路由划分

页面路由（根据不同的url跳转不同的页面（刷新操作））
hash路由（根据不同hash值渲染不同的内容不刷新）

location.href = 地址
location.assign('地址')
location.replace('地址')

    <button onclick="location.hash = 'hello'">hello</button>
    <button onclick="location.hash = 'byby'">byby</button>
    <div id="context"></div>
    <script>
        //hash路由 (根据不同hash值渲染不同的内容 不刷新)
        //监听事件 onhashchange
        window.onhashchange = function(){
            var hash = location.hash
            if(hash=='#hello'){
                document.getElementById('context').innerHTML = 'hello'
            }else{
                document.getElementById('context').innerHTML = 'byby'

            }
        }

history路由（根据不同的url来渲染不同的内容不刷新）

    <button onclick="history.pushState('','','')">btn1</button>
    <button onclick="history.replaceState('','','')">btn2</button>
    <div id="context"></div>
    <script>
        //监听事件 onpopstate
        //等待back 或 go 或 forward才触发
        window.onpopstate = function(){
            if(location.href.search('document')){
                document.getElementById('context').innerHTML = 'hello'
            }else{
                document.getElementById('context').innerHTML = 'byby'

            }
        }
    </script>

hash路由和history路由常用于SPA（单页应用程序）程序，不刷新页面也能实现视图的切换。所以对应的在vue或者react的路由底层设计中只有俩种模式一种为hash模式一种为history模式。这种程序一般运用在前后端分离的基础上。
单页应用程序的优缺点
优点
无刷新减少了页面的回流（重新渲染）
业务更加清晰代码结构更加明了
缺点
不利于seo
所以为了解决单页应用不利于seo的问题出现了一个新的技术叫预渲染

跳转页面

assgin

replace

forward

back