js-BOM

BOM
浏览器对象模型；

BOM可以让我们通过JS来操作浏览器;
BOM对象：
1、Window：代表的是整个浏览器的窗口，同时也是网页中的全局对象；
2、Navigator：代表当前浏览器的信息，通过该对象可以来识别不同的浏览器；
3、Location：代表当前浏览器的地址信息，可以获取地址栏信息，或者操作浏览器跳转页面；
4、History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录；
由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后翻页，而且该操作只在档次访问时有效。
5、Screen：代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息。
这些BOM对象都在浏览器作为window对象的属性保存的。

Navigator
根据navigator.userAgent字段判断浏览器类型，仅供参考：

检验浏览器类型

function checkBrowser() {
    var ua = navigator.userAgent;
    if ("ActiveXObject" in window) {
        return "ie";
    }else if (/edg/i.test(ua)) {
        return "edge";
    } else if (/firefox/i.test(ua)) {
        return "firefox";
    } else if (/opera|opr/i.test(ua)) {
        return "opera";
    } else if (/chrome/i.test(ua)) {
        return "chrome";
    } else if (/safari/i.test(ua)) {
       return "safari";
    }
}

自己验证了IE、火狐、谷歌、Edge浏览器，如有问题请指正！

History
可以用来操作浏览器向前向后翻页；
history.length属性：获取当前访问链接的数量；
history.back()方法：可以返回到上一个页面，作用和浏览器回退按钮一样；
history.forward()方法：可以跳转下一页面，作用和浏览器的前进按钮一样；
history.go()方法：参数传正数向前跳转页面，传负数向后跳转页面；

Location
直接打印location，可以获取到地址栏的信息（当前页面完整路径）；
直接修改location为一个完整的路径或相对路径，则可以自动跳转到该路径。

location = "./a.html";
location.assign("./a.html");

window.location.href 返回当前页面的href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档，会生成历史记录
window.location.reload 重新加载页面（刷新页面），传true参数，则会强制刷清空页面缓存
window.location.repace替换一个跳转一个页面，但是不会生成历史记录

定时器（Timing）
window 对象允许以指定的时间间隔执行代码。这些时间间隔称为定时事件。

通过 JavaScript 使用的有两个关键的方法：
setTimeout(function, milliseconds)：在等待指定的毫秒数后执行函数(延时调用)，只执行一次。
setInterval(function, milliseconds)：等同于 setTimeout()，但持续重复执行该函数。
setTimeout() 和setInterval() 都属于 HTML DOM Window 对象的方法。
clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

var timer = setInterval(() => {
        time++;
        if (time > 10) {
            clearInterval(timer);
            return;
        }
        div.innerHTML = time.toString();
}, 1000);

js-BOM

推荐阅读更多精彩内容