Bom

概述

Bom 浏览器对象模型,他是用于操作浏览器相关内容的

Bom是一个缺乏规范的东西,为了保证他的规范性产生了一系列共用对象来解决这个问题.但是这些共用对象存在对应的兼容问题,直到W3c介入,他的兼容得到了保障


Window的相关属性和方法

概述:window属于浏览器的global对象(顶层对象).所有的全局函数及全局变量都属于window

方法

控制台打印方法

console.log()

console.error()

console.info()

console.warn()

console.debug()

弹窗相关方法

alert 提示框

prompt 输入框

confirm 交互框

窗口打开关闭的方法

open 打开一个新的窗口

close 关闭当前窗口

改变窗口大小的方法

resizeTo

resizeBy

改变窗口位置的方法

moveTo

moveBy

改变滚动栏位置的方法

scrollTo

scrollBy

查找方法

find

窗口聚焦和失焦的方法

window.blur() 失焦

window.focus() 聚焦

属性

获取窗口的父窗口 parent

innerHeight 获取高度 innerWidth 获取宽度

Document 文档对象

document对象是属于BOM的组成部分,他里面的一些的相关操作和对应的属性是属于DOM操

作,具体的内容在对应的DOM中会提到。

document表示的是对应的HTML文档,他是用于操作对应HTML文档。

Location 地址栏对象

属性

hash 获取#后面的值

search 获取?后面的值

port 端口号

protocol协议

host 主机

hostname 主机名

pathname 路径地址

href对应的url地址

origin对应的跨域地址

方法

reloaed 重新加载

assign 指定对应的地址进行跳转(有历史)

replace 替换当前的(没有历史)

对应的href进行赋值也可以进行跳转

history 历史对象 (*)

概述:history他里面包含了对应的历史页面,他是对于历史页面进行相关的操作(页面替换,页面的跳转)

属性

length属性(历史页面个数)

state属性(状态 存储对应的值)

scrollRestoration(滚动栏恢复行为auto.manual)

方法

forward 前进

back后退

go 去任意历史页面(当前页面为0,大于0前进 小于0后退)

pushState

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

replaceState

不会新增历史对象,把当前历史页面进行替换也会改变对应的url地址 也不会进行跳转(刷新) 也会改变对应的state的值

pushState和replaceState的区别

pushState或者是replaceState 如果传入对应的url 他会改变对应的url地址 (并非跳转 不会刷新)

pushState或者replaceState 会给对应的state进行赋值

pushState 会新增对应新的历史页面 replaceState 不会新增(他会替换当前历史页面)

Screen 屏幕对象

属性

width 屏幕的宽度

height 屏幕高度

availHeight 可占用的最大屏幕高度

availWidth 可占用的最大屏幕宽度

availLeft 可占用的空间离桌面的左边距离

availTop 可占用的空间离桌面的上边距离

Navigator 导航对象

概述:他主要是用于获取用户浏览器及系统相关的设置以及内容

属性

userAgent 表示当前用户的系统信息以及对应的浏览

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

路由(扩展)

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

前端路由(渲染)

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

前端路由的分类

页面路由(会进行页面的跳转 页面会刷新)

hash路由(根据对应的hash值来渲染对应的页面 不会进行页面的刷新操作)

history路由 (根据对应的地址的变化 而渲染对应的页面 不会进行页面的刷新操作)

需要对应得pushState调用或者replaceState调用

在改变了对应得state值以后 调用对应得forward方法或者是back方法或者是go方法

SPA 单页应用程序(只有一个页面)里面常用的路由是hash以及history路由

扩展补充内容

在对应的单页应用程序中我们常用vue和react等框架来进行开发,这就导致了我们对应的vue和react中

对应的路由模式常用hash模式及history模式(默认设置的路由模式都是hash模式)

后端路由 (业务)

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容

  • BOM 概述:BOM(全称bowser object model)浏览器对象模型,用于浏览器相关内容操作; BOM...
    湖南第一深情阅读 124评论 0 1
  • BOM的概述: Bom 称为浏览器对象模型(bowser object model),也就意味他可以获取浏览器上的...
    富贵花开888阅读 279评论 0 1
  • ECMAScript是JavaScript的核心,而BOM(浏览器对象模型,Browser Object Mode...
    海人为记阅读 173评论 0 0
  • BOM BOM的概述: bom 称为浏览器对象模型(bowser object model),也就意味他可以获取浏...
    喷火小王八阅读 150评论 0 1
  • 浏览器架构 JavaScript运行在浏览器,BOM就是连接JavaScript代码和浏览器的桥梁,而DOM就是用...
    一颗冰淇淋阅读 301评论 0 0