javaScript（五）：BOM操作

1、BOM介绍

什么是BOM

• BOM（Browser Object Model）：流览器对象模型
• 将浏览器各个组成部分封装成不同的对象，方便我们进行操作

常用的BOM常用对象

BOM常用对象	作用
window	表示浏览器窗口对象
location	表示地址栏对象
history	表示浏览历史记录对象

2、BOM-window对象

2.1、浏览器窗口对象

window：浏览器窗口对象

window中的三个对话框:

window中与对话框有关的方法	作用
alert(“提示信息”)	弹出一个信息框，只有一个确定按钮
string prompt(“提示信息”,“默认值”)	弹出一个输入框，可以输入默认值
boolean confirm(“提示信息”)	弹出一个确认框，有确定和取消两个按钮，点确定返回true，点取消返回false

**获取：**直接使用window，其中window可以省略

window.alert("警告框1");
alert("警告框2");

代码演示

<script>
    // alert提示框  (只有确定按钮)
    window.alert("警告框1");
    alert("警告框2");
    // 输入框  (可以输入数据,有确定和取消按钮), 点击确定得到输入的内容, 点击取消得到null
    let name = prompt("请输入名字");
    document.write(name + "<br/>");

    // 确认框  (只有有确定和取消按钮), 点击确定得到true, 点击取消得到false
    let flag = confirm("确定使用嘛");
    document.write(flag + "<br/>");
</script>

2.2、计时器对象

window中计时器有关的方法

window中的方法	作用
setTimeout(函数名, 间隔毫秒数)	过一段时间调用一次指定的函数，只调用一次，方法的返回值就是计时器
setInterval(函数名, 间隔毫秒数)	每隔一段时间调用一次指定的函数，方法的返回值就是计时器

代码演示

function dataFun(){
    //输出当前时间
    document.write(new Date() + "<br/>");
}


// 定时器
// setTimeout(函数名, 间隔毫秒数) 过指定时间后执行一次函数
setTimeout(dataFun,1000)

// setInterval(函数名, 间隔毫秒数) 每隔指定的时间都会执行前面的函数(反复执行)
setInterval(dataFun,1000)

2.3、案例演示：定时切换图片

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

<img id="myImage" border="0" src="img/off.gif"/>
<script>
    // 初始图片计数器
let num = 0;

// 定义图片切换函数
function imgChange() {
  // 判断图片计数器的奇偶性
  if (num % 2 == 0) {
    // 当计数器为偶数时，切换图片为 on.gif
    document.getElementById("myImage").src = "img/on.gif";
  } else {
    // 当计数器为奇数时，切换图片为 off.gif
    document.getElementById("myImage").src = "img/off.gif";
  }
  // 每次切换完毕后，计数器加1
  num++;
}

// 定时器，每隔1秒钟调用一次图片切换函数
setInterval("imgChange()", 1000);
</script>

3、BOM-location地址栏对象

location常用属性

属性	功能
href	获取：返回完整的URL 设置：跳转到一个新的页面

**获取：**使用window.location获取，window可以省略

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

代码演示

<button onclick="hrefFun()">按钮</button>
<script>
    // location的href属性: ?
    document.write(window.location + "<br/>");

    // location的href属性: ?
    function hrefFun(){
        location.href = "https://www.baidu.com/";
    }
</script>

4、BOM-history历史记录对象

history作用

表示访问过的历史对象，如果没有历史记录，这个对象中的方法不可用

方法	作用
forward()	相当于浏览器上前进按钮，如果浏览器上按钮不可用，这个方法就不起作用
back()	相当于浏览器上后退按钮

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

window.history.方法();
history.方法();

注意：

1. 浏览器上的前进和后退按钮可以点的时候，这个代码才起作用
2. 读取的是浏览器缓存中数据，如果要访问服务器的数据，需要刷新

代码演示

<a href="01_js_hellowrold.html">跳转</a>
<button onclick="history.forward()">前进</button>
<button onclick="history.back()">后退</button>