js BOM、js window、js location、js navigator、js history

1.BOM

• js分为三部分：

• ECMAScript 语法标准。
• BOM 操作浏览器部分功能。
• DOM 操作网页上的元素。

【注意】

• DOM是BOM的一部分。
• window对象时BOM的顶层对象。所有的BOM对象都是通过window对象延伸出来的，也可以成为window的子对象。

什么是BOM？

• Browser object model 浏览器对象模型。

常见的BOM对象

• window：代表的是整个浏览器窗口
• Location：浏览器中的地址栏信息。
• Navigator：当前浏览器的信息。 使用的什么浏览器，内核，浏览器的版本。 不常见。
• History：历史记录
• Screen：用户的屏幕信息 不常见。

2.window

• window 常用的方法

• prompt()
• setInterval() 设置定时器。
• clearInterval（）清除定时器
• console 控制台对象。
• open() 开一个新窗口
• onlond() 页面加载完成后执行传入的函数。

• 所有的方法调用都是通过： 对象名.方法名();
• 我们自定义的函数，其实都是定义在window对象中，调用的时候，可以省略window对象名不写。
• window.onload()

• 在页面加载完成后执行操作。

• js的书写位置

• 推荐：body的尾部，head标签的尾部。
• 如果写在head标签中，获取页面中的标签元素时，因为js是从上往下执行的，执行获取元素的代码时，页面还没加载完成，此时获取元素就会得到null。
• 而写在body标签尾部时，执行获取元素的代码时，页面元素已经加载完成了，此时就可以正常的获取元素。
• 如果就要写在head标签尾部，就需要使用window.onload（）方法。

3.location

• location 浏览器地址栏。

• 一个完整的URL应该包含哪些内容：

• 传输协议： http https（安全的协议，需要用证书）
• 域名 s.taobao.com
• 网页地址 /search
• 查询字符串（参数） q=男士风衣 键值对 q键 男士风衣 值 浏览器传给服务器的信息。
• #123 哈希（hash） 锚点

• location:

• hash：当前页面的hash值。
• href：当前地址栏中的地址。 重点

• 读：location.href 返回的是当前页面的地址。
• 写：location.href = “写在地址栏中的地址”（跳转页面）

• search: 重点

• 获取当前地址栏中的查询字符串.

4.navigator

• navigator 浏览器信息 （了解）

• userAgent 浏览器的版本以及型号信息。
• appName 所有的浏览器都是一样的，都是Netscape
• platform 显示浏览器所在的系统

例:

    console.log(navigator.userAgent);  //Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36
    console.log(navigator.appName);    //Netscape
    console.log(navigator.platform);    //Win32

5.history

• history 历史记录对象
• 每个浏览器窗口都有自己的history对象。

常用方法

• history.back(); 后退一页 相当于浏览器 ←
• history.forward(); 前进一页 相当于浏览器 →
• history.go(n)

• n表示一个数字。
• 正整数 表示前进n页
• 0 表示刷新当前页面。
• 负整数 表示后退n页

属性

• length：history对象中历史记录数。

【注意】

• 后退的时候，需要有历史记录才可以后退
• 前进的时候，必须后退过才可以前进。

---

案例练习

• 解析查询字符串。
• 获取到的字符串？a=123&b=456;
• 要转换成的对象：
  obj {
    a:123
    b:456
  };

    function parseParams(str) {
      //1.判断是否为空
      if (str == null) {
        return null;
      }
      //2.清除第一个字符串 ? slice不会修改源字符串，所以我们将返回的值重新复制给str
      str = str.slice(1);
      //3.分隔字符串
      var arr = str.split("&");
      // 6.创建一个对象，用来接收解析的结果。
      var obj = {};
      //4.遍历数组
      arr.forEach(function (item, index) {
        //5.分隔字符 “=”
        var tmp = item.split("=");
        // 7.数组的第一个是属性名，第二个是属性值。放入对象中。
        // var a =  tmp[0];
        // var b = tmp[1];
        obj[tmp[0]] = tmp[1];

      });
      return obj;
    }
    console.log(parseParams("?a=123&b=456"));  //{a: "123", b: "456"}

---

The end