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. aliyun二级域名绑定

    NameVirtualHost *:80 开启监听 <VirtualHost *:80>    DocumentRoot /home/service/    ServerName serv ...

  2. find: paths must precede expression

    郁闷了今天进行如下的查询居然报告错误, [root@localhost /]# find /root/ -name *.txtfind: paths must precede expressionUs ...

  3. 题解 P1403 【[AHOI2005]约数研究】

    题目 看到题解区很多人直接给出结论:答案为 \(\displaystyle \sum_{i=1}^n\lfloor{n\over i}\rfloor\) ,没给出证明,这里给出证明 [分析] 首先,我 ...

  4. i春秋-web- 爆破2

    题目:flag不在变量中. 打开链接: <?php include "flag.php"; $a = @$_REQUEST['hello']; eval( "var ...

  5. 吴裕雄--天生自然 JAVASCRIPT开发学习：Number 对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. HGP|VCG|UK10K|中科院职业人群队列研究计划|药物基因组学

    全球性计划:表观组计划:肝计划 测1000人的变异level HGP计划三个阶段,范围逐步扩大和深化. Pilot:deep sequence---low coverage Phase 1 Phase ...

  7. SQL游标的介绍与使用举例

    一.游标的定义 declare (游标名) [INSENSITIVE] [SCROLL] CURSOR FOR select_statement [FOR{READ ONLY|UPDATE[OF co ...

  8. Thread--线程工作万花筒

    线程工作内存图. 线程状态.

  9. 我的第一次JAVA实训——校园公用房管理系统

    老铁们,昨天电脑没电了.这是上周答应的大项目. 别打脸. 详细内容我之后再写,下面是代码地址. Github地址 附:一个寂寞 以上

  10. MAVEN报错Could not get the value for parameter compilerId for

    Maven:Could not get the value for parameter compilerId for plugin execution default-compile..... 前两天 ...