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. Linux 下 OpenCV3 安装

    编译安装OpenCV3 从官网下载:http://opencv.org/releases.html 选择一个较新版本的opencv3.X,下载source源代码 下载之后解压,并cd到该文件夹进行编译 ...

  2. Kettle无法下载以及点击无反应的问题

    最开始用于解决MySQL转移数据到ORACLE的问题,尝试了几种方法. 1.直接从Mysql导出csv文件.这种方式最直接简单,但是问题是数据大的话,容易出现数据对不齐的情况,导入这个时候就会出现错误 ...

  3. Cracking Digital VLSI Verification Interview 第三章

    目录 Programming Basics Basic Programming Concepts Object Oriented Programming Concepts UNIX/Linux Pro ...

  4. “帮你”校园资讯平台app使用体验

    该app由我的17级学长学姐编写而成,主要功能失物招领,二手市场,表白墙.该软件目前只是面向本校的各专业学生,为内测版本.该软件的注册流程简单,只需要学号确定身份后即可登陆,并且发布各种信息,或者与丢 ...

  5. spyder.app制作图标

    安装了 anaconda3, 自带spyder, 但是只能在terminal 中打开, 非常不友好. 模仿 anaconda3/目录下 Anaconda-Navigator.app, 制作了 spyd ...

  6. 面试易错题 Java

    1. int[] arr = new int[10]; System.out.println(arr);//地址值? char[] arr1 = new char[10]; System.out.pr ...

  7. //使用PDO连接mysql数据库

    <?php //使用PDO连接mysql数据库 class pdo_con{     var $dsn = 'mysql:dbname=test; host:127.0.0.1';     va ...

  8. solr集群的搭建

    solrCloud 昨天随手写了个solr单机版的搭建,今天准备写一个solr集群的搭建!1.solr集群只要环境配置正确还是比较简单的环境:CentOS-6.4-i386-bin-DVD1.isoj ...

  9. 吴裕雄--天生自然Linux操作系统：Linux 磁盘管理

    Linux磁盘管理好坏直接关系到整个系统的性能问题. Linux磁盘管理常用三个命令为df.du和fdisk. df:列出文件系统的整体磁盘使用量 du:检查磁盘空间使用量 fdisk:用于磁盘分区 ...

  10. Chladni Figure CodeForces - 1162D （暴力，真香啊~）

    Chladni Figure CodeForces - 1162D Inaka has a disc, the circumference of which is nn units. The circ ...