08 BOM

wyjue

关注

最新推荐文章于 2026-08-18 20:01:07 发布 · 108 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

相机图像质量研究(15)常见问题总结：光学结构对成像的影响--暗角老式相机的暗角往往比较明显，周围一圈能够明显感觉到亮度下降的很多，当然有些电源模仿手持相机的摄影效果，也能看到周围明显的亮度下降。一、阅读详情

概述: 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('路由触发了');
    }