理解BOM：浏览器对象模型与JavaScript交互-优快云博客

本文链接：https://blog.youkuaiyun.com/XW_c_h_e_n/article/details/129467923

BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。

我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如：我现在想将浏览器地址栏的地址改为 https://www.itheima.com 就可以通过使用 BOM 中定义的 Location 对象的 href 属性，代码： location.href = "https://itheima.com";

BOM 中包含了如下对象：

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系

1 Window对象

window 对象是 JavaScript 对浏览器的窗口进行封装的对象。

1.1 获取window对象

该对象不需要创建直接使用 window，其中 window. 可以省略。比如我们之前使用的 alert() 函数，其实就是 window 对象的函数，在调用是可以写成如下两种

显式使用 window 对象调用

window.alert("abc");

隐式调用

alert("abc")

1.2 window对象属性

window 对象提供了用于获取其他 BOM 组成对象的属性

也就是说，我们想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。

1.3 window对象函数

window 对象提供了很多函数供我们使用，而很多都不常用；下面给大家列举了一些比较常用的函数

setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次setInterval(function,毫秒值) :在一定的时间间隔后执行一个function，循环执行

confirm代码演示：

// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
varflag=confirm("确认删除？");
alert(flag);

下图是 confirm() 函数的效果。当我们点击确定按钮，flag 变量值记录的就是 true ；当我们点击取消按钮，flag 变量值记录的就是 false。

而以后我们在页面删除数据时候如下图每一条数据后都有删除按钮，有可能是用户的一些误操作，所以对于删除操作需要用户进行再次确认，此时就需要用到 confirm() 函数。

定时器代码演示：

setTimeout(function (){
    alert("hehe");
},3000);

当我们打开浏览器，3秒后才会弹框输出 hehe，并且只会弹出一次。

setInterval(function (){
    alert("hehe");
},2000);

当我们打开浏览器，每隔2秒都会弹框输出 hehe。

1.4 案例

需求：每隔1秒，灯泡切换一次状态

需求说明：

有如下页面效果，实现定时进行开灯、关灯功能

初始页面环境

<!DOCTYPE html>
<html lang="en">
<head>
    <metacharset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>

<input type="button"onclick="on()"value="开灯">
<img id="myImage"border="0"src="../imgs/off.gif"style="text-align:center;">
<input type="button"onclick="off()"value="关灯">

<script>
    functionon(){
        document.getElementById('myImage').src='../imgs/on.gif';
    }

    functionoff(){
        document.getElementById('myImage').src='../imgs/off.gif'
    }

</script>
</body>
</html>

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <metacharset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>

<input type="button"onclick="on()"value="开灯">
<img id="myImage"border="0"src="../imgs/off.gif"style="text-align:center;">
<input type="button"onclick="off()"value="关灯">

<script>
    functionon(){
        document.getElementById('myImage').src='../imgs/on.gif';
    }

    functionoff(){
        document.getElementById('myImage').src='../imgs/off.gif'
    }
    
    //定义一个变量，用来记录灯的状态，偶数是开灯状态，奇数是关灯状态
    var x=0;
    //使用循环定时器
    setInterval(function (){
        if(x%2==0){//表示是偶数，开灯状态，调用 on() 函数
            on();
        }else {  //表示是奇数，关灯状态，调用 off() 函数
            off();
        }
        x++;//改变变量的值
    },1000);

</script>
</body>
</html>

2 History对象

History 对象是 JavaScript 对历史记录进行封装的对象。

History 对象的获取

使用 window.history获取，其中window. 可以省略

History 对象的函数

这两个函数我们平时在访问其他的一些网站时经常使用对应的效果，如下图

当我们点击向左的箭头，就跳转到前一个访问的页面，这就是 back() 函数的作用；当我们点击向右的箭头，就跳转到下一个访问的页面，这就是 forward() 函数的作用。

3 Location对象

Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

3.1 获取Location对象

使用 window.location获取，其中window. 可以省略

window.location.方法();
location.方法();

3.2 Location对象属性

Location对象提供了很对属性。以后常用的只有一个属性 href

代码演示：

alert("要跳转了");
location.href="https://www.baidu.com";

在浏览器首先会弹框显示要跳转了，当我们点击了确定就会跳转到百度的首页。

3.3 案例

需求：3秒跳转到百度首页

分析：

3秒跳转，由此可以确定需要使用到定时器，而只跳转一次，所以使用 setTimeOut()

要进行页面跳转，所以需要用到 location 对象的 href 属性实现