四、BOM

1.BOM的介绍

JavaScript基础分为三个部分：

• ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
• DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
• BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

BOM:Browser Object Model,浏览器对象模型。
BOM的结构图：

由上图可知：
window对象是bom的顶层对象，所有对象都是通过它延伸出来的，也可以成为window的子对象
dom是bom的一部分

window对象：

• window对象是JavaScript中的顶级对象。
• 全局变量、自定义函数也是window对象的属性和方法
• window对象下的属性和方法调用时，可以省略window

  2.弹出系统对话框

  比如alert(1)是window.alert(1)的简写
  系统对话框有三种：

  alert();    //弹出警告框
  confirm();    //弹出确认框，确定 返回true，取消 返回false
  prompt();        //弹出提示用户输入的对话框， 返回输入的内容

3.打开、关闭窗口

打开窗口

    window.open(url,target,param);
  /*url:要打开的地址
    target:新窗口的位置，可以是 _blank、_self、_parent
    param：新窗口的一些设置
    返回值：新窗口的句柄
    */

关闭窗口

window.close();

4.setTimeout和setInterval

  <script>
        /* 超时调用 间隔一段时间,执行函数,且只执行一次 */
        /* 异步 */
        console.log(1)
        setTimeout(function(){
            console.log("a")
        },1000)
        console.log(2);        //结果1 2 a;由于这个方法要1s时间故先跳过，最后执行
    </script>
   <script>
        /* 间歇调用  间隔一段时间,执行函数 */
        setInterval(function(){
            console.log("b")
        },3000)
    </script>
 <script>
        var btn = document.getElementById("btn");
        var timer = window.setInterval(function(){
            console.log("a")
        },3000)
        /* 清除定时器
        clearInterval()
         */
        console.log(timer)
        btn.onclick = function(){
            clearInterval(timer)
        }
    </script>

5.BOM的内置对象

location对象

window.location可以简写成location。location相当于浏览器地址栏，可以将URL解析成独立的片段
location对象的属性：

• href：跳转
• hash 返回url中#后面的内容，包含#
• host 主机名，包括端口
• hostname 主机名
• pathname url中的路径部分
• protocol 协议 一般是http、https
• search 查询字符串

location.href属性举例：
有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。

<script>
    setTimeout(function () {
        location.href = "http://www.baidu.com";
    }, 5000);
</script>

navigator对象

window.navigator的一些属性可以获取客户端的一些信息

• userAgent：系统，浏览器
• platform：浏览器支持的系统，win/mac/linux

  console.log(navigator.userAgent);
    console.log(navigator.platform);

  结果：
  

history对象

1、历史记录管理
2、后退：

• history.back()
• history.go(-1)：0是刷新

3、前进：

• history.forward()
• history.go(1)

用的不多。因为浏览器中已经自带了这些功能的按钮