六、 JavaScript：BOM对象

JavaScript入门专栏

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

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

BOM 中包含了如下对象：

• Window：浏览器窗口对象
• Navigator：浏览器对象
• Screen：屏幕对象
• History：历史记录对象
• Location：地址栏对象

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对象常用函数

confirm代码示例：

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

alert(flag);

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

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

//当我们打开浏览器，每隔2秒都会弹框输出 `haha`。
setInterval(function (){
    alert("haha");
},2000);

//当我们打开浏览器，3秒后才会弹框输出 `haha`，并且只会弹出一次。
setTimeout(function (){
    alert("haha");
},3000);

2. History对象

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

• History 对象的获取
  使用 window.history获取，其中window. 可以省略
• History 对象的函数
  
  这两个 函数对应的就是浏览器上的前进、后退按钮。

3. Location对象

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

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

Location对象属性

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

案例

需求：打开网页3秒后跳转到百度。

document.write("3秒跳转到百度..."); 
setTimeout(function (){
    location.href = "https://www.baidu.com"
},3000);