1.1. BOＭ和ＤOM的区别
DOM就是一套操作HTML标签的API(接口/方法/属性)

BOM就是一套操作浏览器的API(接口/方法/属性)

1.2. BOM中常见的对象
window: 代表整个浏览器窗口
注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局),下面的对象都能通过它找到

Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器

Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息

History: 代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步
注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿本次使用时的历史记录

Screen: 代表用户的屏幕信息

1.3. history
history应该是属于最常用的BOM对象之一了，我把它写在最前面

最重要的方法：window.history.go(x);

x>0 前进x个当前标签页的历史记录
x<0 后退x个当前标签页的历史记录
x=0 刷新
<body>
<h1>我是第一个界面</h1>
<button id="btn1">前进</button>
<button id="btn2">刷新</button>
<a href="52-JavaScript-History2.html">新的界面222</a>
<script
    // 注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录
    let oBtn1 = document.querySelector("#btn1");
    let oBtn2 = document.querySelector("#btn2");
    // 前进
    /*
    注意点:
    只有当前访问过其它的界面, 才能通过go方法前进
    */
    oBtn1.onclick = function () {
        // window.history.forward();
        window.history.go(1);
    }
    // 刷新
    oBtn2.onclick = function () {
        window.history.go(0);
    }
</script>
</body>

<body>
<h2>我是第2222个界面</h2>
<button id="btn1">后退</button>
<script>
    let oBtn1 = document.querySelector("#btn1");
    // 后退
    oBtn1.onclick = function () {
        // window.history.back();
        window.history.go(-1);
    }
</script>
</body>

1.4. navigator
Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器

通过console.log(window.navigator)可以直接在控制台输入当前的浏览器信息，其中你会发现
userAgent: “Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36”
vendor: "Google Inc."这一个属性中描述了浏览器信息，我们可以用正则表达式的形式判断是哪一款浏览器

var agent = window.navigator.userAgent;
    if(/chrome/i.test(agent)){
        alert("当前是谷歌浏览器");
    }else if(/firefox/i.test(agent)){
        alert("当前是火狐浏览器");
    }else if(/msie/i.test(agent)){
        alert("当前是低级IE浏览器");
    }else if("ActiveXObject" in window){
        alert("当前是高级IE浏览器");
    }s

1.4.1. 顺道给你补习一下这两个正则表达式的用法
/chrome/i是一个正则表达式，表示不分大小写匹配句子中的chrome，正则表达式.test(str)是在利用js中正则对象的test方法，检测句子中是否包含这个要求的单词

“ｓｔｒ” in 变量/obj　利用的是in语法，判断这个变量或者obj中是否有这个str

1.5. location
纸上看来终觉浅，绝知此事要躬行。

<body>
<button id="btn1">获取当前地址</button>
<button id="btn2">设置地址</button>
<button id="btn3">刷新</button>
<button id="btn4">强制刷新</button>
<script>
    // Location:  代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
    let oBtn1 = document.querySelector("#btn1");
    let oBtn2 = document.querySelector("#btn2");
    let oBtn3 = document.querySelector("#btn3");
    let oBtn4 = document.querySelector("#btn4");
    // 获取当前地址栏的地址
    oBtn1.onclick = function(){
        console.log(window.location.href);
    }
    // 设置当前地址栏的地址
    oBtn2.onclick = function(){
        window.location.href = "http://www.it666.com";
    }
    // 重新加载界面
    oBtn3.onclick = function(){
        window.location.reload();
    }
    oBtn4.onclick = function(){
        window.location.reload(true);
    }
</script>
</body>

一文带你了解BOM基本知识的更多相关文章

  1. Istio是啥？一文带你彻底了解！

    原标题:Istio是啥?一文带你彻底了解! " 如果你比较关注新兴技术的话,那么很可能在不同的地方听说过 Istio,并且知道它和 Service Mesh 有着牵扯. 这篇文章可以作为了解 ...

  2. 【转帖】Istio是啥？一文带你彻底了解！

    Istio是啥?一文带你彻底了解! http://www.sohu.com/a/270131876_463994 原始位置来源: https://cizixs.com 如果你比较关注新兴技术的话,那么 ...

  3. 一文带你了解 C# DLR 的世界

    一文带你了解 C# DLR 的世界 在很久之前,我写了一片文章dynamic结合匿名类型 匿名对象传参,里面我以为DLR内部是用反射实现的.因为那时候是心中想当然的认为只有反射能够在运行时解析对象的成 ...

  4. 一文带你读懂zookeeper在大数据生态的应用

    一个执着于技术的公众号 一.简述 在一群动物掌管的世界中,动物没有人类聪明的思想,为了保持动物世界的生态平衡,这时,动物管理员-zookeeper诞生了. 打开Apache zookeeper的官网, ...

  5. 实战 | 一文带你读懂Nginx反向代理

    一个执着于技术的公众号 前言 在前面的章节中,我们已经学习了nginx基础知识: 给小白的 Nginx 10分钟入门指南 Nginx编译安装及常用命令 完全卸载nginx的详细步骤 Nginx 配置文 ...

  6. 一文带您了解5G的价值与应用

    一文带您了解5G的价值与应用 5G最有趣的一点是:大多数产品都是先有明确应用场景而后千呼万唤始出来.而5G则不同,即将到来的5G不仅再一次印证了科学技术是第一生产力还给不少用户带来了迷茫——我们为什么 ...

  7. 一文带你了解elasticsearch

    一文带你了解elasticsearch cxf2102100人评论160人阅读2019-07-02 21:31:36   elasticsearch es基本概念 es术语介绍 文档Document ...

  8. 一文带你看清HTTP所有概念(转)

    一文带你看清HTTP所有概念   上一篇文章我们大致讲解了一下 HTTP 的基本特征和使用,大家反响很不错,那么本篇文章我们就来深究一下 HTTP 的特性.我们接着上篇文章没有说完的 HTTP 标头继 ...

  9. 一文带你了解js数据储存及深复制（深拷贝）与浅复制(浅拷贝)

    背景 在日常开发中,偶尔会遇到需要复制对象的情况,需要进行对象的复制. 由于现在流行标题党,所以,一文带你了解js数据储存及深复制(深拷贝)与浅复制(浅拷贝) 理解 首先就需要理解 js 中的数据类型 ...

随机推荐

  1. 题目（或游戏）流程控制器上传到GitHub

    题目控制系统 1 支持 题目按相同的个数分组 2 支持 pause resume 3 支持 每题限定时间 4 支持 支持对计时器进行回调 5 支持 在全流程开始,全流程结束,每组开始,每组结束,每题开 ...

  2. ARDUINO+MCP2515实现CAN通讯接收

    我的学习过程有几个关键点: 1.MCP2515 CAN总线模块与ARDUINO UNO R3的接线方式: 2.程序set_mask_filter_recv的参数设置,mcp_can_dfs.h库文件设 ...

  3. k8s 使用新增user配置kubectl在各个节点都可运行

    k8s增加普通用户User 普通用户并不是通过k8s来创建和维护,是通过创建证书和切换上下文环境的方式来创建和切换用户.其实创建用户的步骤,就是手动部署k8s集群里的一个步骤.创建过程见下: 1.创建 ...

  4. KL散度与JS散度

    1.KL散度 KL散度( Kullback–Leibler divergence)是描述两个概率分布P和Q差异的一种测度.对于两个概率分布P.Q,二者越相似,KL散度越小. KL散度的性质:P表示真实 ...

  5. 吴裕雄--天生自然MySQL学习笔记：MySQL 导出数据

    MySQL中可以使用SELECT...INTO OUTFILE语句来简单的导出数据到文本文件上. 使用 SELECT ... INTO OUTFILE 语句导出数据 以下实例中将数据表 runoob_ ...

  6. Java Keyword Synchronized 学习记录

    Synchronized Java编程思想:每个对象都包含了一把锁(也叫作"监视器"),它自动成为对象的一部分,调用任何synchronized方法时,对象就会被锁定,不可再调用那 ...

  7. Nginx安全优化

    一.隐藏版本号 http { server_tokens off; } 经常会有针对某个版本的nginx安全漏洞出现,隐藏nginx版本号就成了主要的安全优化手段之一,当然最重要的是及时升级修复漏洞. ...

  8. 阿里云ECSLinux系统下挂载磁盘

    最近公司服务器老是提示磁盘空间不足,原因是以前的业务负责人开了Tomcat的debug日志并且没有做日志轮询,所以日志量非常大.当我做了日志切割轮询后发现磁盘还是太小才40G,按理外网服务器怎么可能这 ...

  9. bugs开发异常解决方法

    1.      前提 第一层:遇到异常首先必须告诉自己,冷静,不要慌.(一看到Bug就心慌,那么就不能释放必杀技) 2.      入门级 第二层:遇到Bug,第一潜意识看输出异常的信息的(控制台输出 ...

  10. 备战秋招——C++知识点

    1.字符串的末尾'\0'也算一个字符,一个字节. 2.使用库函数strcpy(a,b)进行拷贝b->a操作,strcpy会从源地址一直往后拷贝,直到遇到'\0'为止.所以拷贝的长度是不定的.如果 ...