第二节 BOM
1.概念
Browser Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象。
2.组成
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象
3.window：窗口对象
1.创建
2.方法
1.与弹出框有关的方法
-
alert() 显示一段消息和一个确认按钮的警告框
-
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
- 如果用户点击确认按钮，返回true
- 如果用户点击取消按钮，则返回false
<script> var flag = confirm("拜拜"); if(flag){ alter("慢走不送"); }else{ alter("怎么又回来了"); } </script> -
prompt() 显示可提示用户输入的对话框
<script>
let result = prompt("来玩啊");
alert("欢迎"+result);
</script>
2.与打开关闭浏览器窗口有关的方法
close() 关闭浏览器窗口
- 谁调用 关谁
open() 打开一个新的浏览器窗口
- 返回新的window对象
示例代码
<body>
<input id = "openBtn" type = "butten" value = "打开窗口">
<input id = "closeBtn" type = "butten" value = "关闭窗口">
<script>
// 打开窗口
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function (){
newWindow.open();
}
// 关闭窗口(关闭上一个openBtn打开的窗口)
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
newWindow.close();
}
</script>
</body>
3.与定时器有关的方法
1.setTimeout()
在指定的毫秒值后调用函数或计算表达式。
- 参数：
- js代码或者方法对象
- 毫秒值
- 返回值：唯一标识，用于取消定时器
2.clearTimeout()
取消由 setTimeout() 方法设置的定时器
3.setInterval()
按照指定的周期（以毫秒计）来调用函数或者计算表达式
4.clearInterval()
取消由setInterval() 设置的timeout
示例案例
轮播图
<body>
<img id = "img" src = "img/banner_1.jpg" width = "100%">
<script>
var number = 1;
function fun(){
number++;
if(number > 3){
number = 1;
}
var img = document.getElementById("img");
img.src = "img/banner_"+number+".jpg";
}
setInterval(fun,3000);
</script>
</body>
3.属性：
1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document
4.特点
- Window对象不需要创建可以直接使用 window使用。 window.方法名();
- window引用可以省略。 方法名();
4. Location：地址栏对象
-
创建(获取)：
- window.location
2. location
- window.location
-
方法：
- reload() 重新加载当前文档。刷新
- 属性
- href 设置或返回完整的 URL。
示例代码
<body>
<input id="btn" type="button" value="刷新">
<input id="gobaidu" type="button" value="百度">
<script>
// 1.获取按钮
var btn = document.getElementById("btn");
// 2.绑定单击事件
btn.onclick = function () {
// 3.刷新页面
location.reload();
}
// 获取href
var href = location.href;
alert(href);
// 1.获取按钮
var baidu = document.getElementById("gobaidu");
// 2.绑定单击事件
baidu.onclick = function () {
// 3.去访问百度官网
location.href = "https://www.baidu.com";
}
</script>
</body>
案例：自动跳转页面
<head>
<meta charset="UTF-8">
<title>自动跳转页面</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
<span id = "time">5</span>后自动跳转...
</p>
<script>
var second = 5;
var time = document.getElementById("time")
// 定义一个方法，获取span标签，修改span标签内容，时间--
function showTime() {
second--;
// 判断时间如果等 <=0，则跳转到首页
if (second <= 0){
// 跳转到首页
location.href = "https://www.baidu.com";
}
time.innerHTML = second+" ";
}
// 设置定时器，1秒执行一次
setInterval(showTime,1000);
</script>
</body>
</html>
5.History:历史记录
1.创建（获取）：
- window.history
- history
2.方法：
-
back() 加载 history 列表中的前一个 URL。
-
forward() 加载 history 列表中的下一个 URL。
-
go(参数) 加载 history 列表中的某个具体页面。
-
参数：
-
正数：前进几个历史记录
-
负数：后退几个历史记录
-
-
3.属性：
- length 返回当前窗口历史列表中的 URL 数量。