2023-02-20 BOM相关

1. 介绍

浏览器对象模型(Browser Object Model)简称 BOM

BOM主要包括一下的对象模型:

  • window:包括全局属性、方法,控制浏览器窗口相关的属性、方法;
  • location:浏览器连接到的对象的位置(URL);
  • history:操作浏览器的历史;
  • navigator:用户代理(浏览器)的状态和标识(很少用到);
  • screen:屏幕窗口信息(很少用到);

2. window对象

window对象在浏览器中可以从两个视角来看待:

  • 视角一:全局对象。
    ✓ 我们知道ECMAScript其实是有一个全局对象的,这个全局对象在Node中是global;
    ✓ 在浏览器中就是window对象;

  • 视角二:浏览器窗口对象。
    ✓ 作为浏览器窗口时,提供了对浏览器操作的相关的API;
    目前已经指定了对应的标准,称之为globalThis,

window对象的作用

  1. 第一:包含大量的属性,localStorage、console、location、history、screenX、scrollX等等(大概60+个属性);
  2. 第二:包含大量的方法,alert、close、scrollTo、open等等(大概40+个方法);
  3. 第三:包含大量的事件,focus、blur、load、hashchange等等(大概30+个事件);
  4. 第四:包含从EventTarget继承过来的方法,addEventListener、removeEventListener、dispatchEvent方法;

MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Window

查阅MDN是有许多符号
  1. 删除符号:表示这个API已经废弃,不推荐继续使用了;
  2. 点踩符号:表示这个API不属于W3C规范,某些浏览器有实现(所以兼容性的问题);
  3. 实验符号:该API是实验性特性,以后可能会修改,并且存在兼容性问题;

window常见的属性

window常见的方法

window常见的事件

3. location对象常见的属性

href: 当前window对应的超链接URL, 整个URL;
protocol: 当前的协议;
host: 主机地址;
hostname: 主机地址(不带端口);
port: 端口;
pathname: 路径;
search: 查询字符串;
hash: 哈希值;

4. Location对象常见的方法

  1. assign:赋值一个新的URL,并且跳转到该URL中;
  2. replace:打开一个新的URL,并且跳转到该URL中(不同的是不会在浏览记录中留下之前的记录);
  3. reload:重新加载页面,可以传入一个Boolean类型;

5. URLSearchParams

常见的方法有如下:

get:获取搜索参数的值;
set:设置一个搜索参数和值;
append:追加一个搜索参数和值;
has:判断是否有某个搜索参数;

https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams

中文会使用encodeURIComponent和decodeURIComponent进行编码和解码

6. history对象常见属性和方法

history对象允许我们访问浏览器曾经的会话历史记录。
两个属性:

length:会话中的记录条数;
state:当前保留的状态值;

五个方法:

back():返回上一页,等价于history.go(-1);
forward():前进下一页,等价于history.go(1);
go():加载历史中的某一页;
pushState():打开一个指定的地址;
replaceState():打开一个新的地址,并且使用replace;

history和hash目前是vue、react等框架实现路由的底层原理,具体的实现方式我会在后续讲解。

7. navigator

8.screen对象

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

推荐阅读更多精彩内容

  • 窗口相关API alert 弹窗,要注意的是其在弹窗中展示内容是会隐式调用内容的toString()方法,因此像对...
    dawsonenjoy阅读 365评论 0 0
  • 目录 1.深入浅出Vue响应式原理[https://segmentfault.com/a/119000001970...
    Grandperhaps阅读 368评论 0 6
  • vue的特点 Vue.js是一款轻量级的以数据驱动(数据的变化将引起视图的变化)的构建单页面应用的mvvm框架,它...
    阿踏阅读 1,908评论 1 11
  • 一、前言 Cookie:Storage用于客户端,cookie用在服务器端,一般cookie不是由客户端设置的,而...
    咸鱼不咸_123阅读 332评论 0 1
  • 此笔记是我在拉勾学习课程过程中的总结,文字原创,笔记里很多技巧和知识是老师总结的,如果有侵权,请联系本人! 一些基...
    你好肥猫阅读 451评论 0 0