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. Java 14 都要来了，为什么还有这么多人固守Java8？

    作者:刘欣 从Java 9开始,Java版本的发布就让人眼花缭乱了. 每隔6个月,都会冒出一个新版本出来,Java 10 , Java 11, Java 12, Java 13, 到2020年3月份, ...

  2. Tensorflow学习教程------非线性回归

    自己搭建神经网络求解非线性回归系数 代码 #coding:utf-8 import tensorflow as tf import numpy as np import matplotlib.pypl ...

  3. k8s中解决容器时差问题

    解决k8s的pod容器的时差常用的两种方式: 1.通过设置pod 模板中的环境变量 env解决 在pod的模板中添加以下: apiVersion: v1 kind: Podmetadata:   na ...

  4. 学生信息的添加 Java web简单项目初试（修改）

    错误原因: 1.Java web 的Servlet类没有配置好,并且缺少一个 Dao类(Date Access Object通常用于操作数据库的). 2.代码的某些名称错误,导致数据库数据存储错误. ...

  5. 微信小程序常用代码（1）——tab切换

          <view class="font-bold tab-content"> <!-- 循环列表 --> <block wx:for=&quo ...

  6. 吴裕雄--天生自然 JAVASCRIPT开发学习：Math（算数） 对象

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

  7. [极客大挑战 2019]Http

    0x00知识点 了解HTTP协议,使用bp伪造. 0x01 解题 首先查看源代码,找到Secret.php 访问 使用bp查看 提示我们需要来自该网址,直接改header头信息即可,我们可以通过使用r ...

  8. 提高js性能的方法

    1.文档瘦身 (1)删除注释(版权及法律声明部分应保留),运行时不需要注释. (2)删除制表符.空格和换行符,这些只是为了便于程序的维护,但是与执行无关. (3)替换长的变量名为短的变量名. (4)使 ...

  9. OpenMP笔记(三)

    个人博客地址:http://www.bearoom.xyz/2019/02/21/openmp3/ 这一部分主要记录一些指令的使用. 一.parallel的使用 parallel是用于构造并行块的,也 ...

  10. 如何在 main() 执行之前先运行其它函数

    摘要:我们知道 C++ 的全局对象的构造函数会在 main 函数之前先运行,其实在 c 语言里面很早就有啦,在 gcc 中可以使用 __attribute__ 关键字指定如下(在编译器编译的时候就绝决 ...