Java Web 7 JavaScript 7.5 BOM

Java Web

【黑马程序员新版JavaWeb基础教程，Java web从入门到企业实战完整版】

7 JavaScript

7.5 BOM

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 中的各个对象和浏览器的各个组成部分的对应关系：

BOM 中的 Navigator 对象和 Screen 对象基本不会使用

7.5.1 Window 对象

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

【获取Window 对象】

该对象不需要创建直接使用 window ，其中 window. 可以省略。

比如之前使用的 alert() 函数，其实就是 window 对象的函数。

调用两种方式：

• 显式使用window对象调用

  window.alert("abc");
  

• 隐式调用

  alert("abc")
  

【window对象属性】

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

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

【window对象函数】

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

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

【confirm代码演示】

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

【定时器代码演示】

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

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

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

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

7.5.2 History对象

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

【History 对象的获取】

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

【History 对象的函数】

网站前进返回…

7.5.3 Location对象

Location 对象是 JavaScript 对地址栏封装的对象。

可以通过操作该对象，跳转到任意页面。

【获取Location对象】

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

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

【Location对象属性】

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

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

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