BOM
✔ 概念：Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象
✔ 组成：
* Window 窗口对象
* Navigator 浏览器对象（不重要）
* Screen 显示器屏幕对象 （不重要）
* History 历史记录对象
* Location 地址栏对象
✔ Window：窗口对象
☛ 创建：Window对象不需要创建可以直接使用
☛ 方法：
（1）与弹出框有关的方法
alert() --- 显示带有一段消息和一个确认按钮的警告框
confirm() --- 显示带有一段消息以及确认按钮和取消按钮的对话框
如果用户点击确定按钮，则方法返回true
如果用户点击取消按钮，则方法返回false
prompt() --- 显示可提示用户输入的对话框
返回值：获取用户输入的值
（2）与打开关闭有关的方法
close() --- 关闭浏览器窗口，谁调用我 ，我就关谁
open() --- 打开一个新的浏览器窗口，返回新的Window对象
（3）与定时器有关的方式
setTimeout() --- 在指定的毫秒数后调用函数或计算表达式
* 参数：① js代码或者方法对象 ；② 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() --- 取消由 setTimeout() 方法设置的 timeout
setInterval() --- 按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval() --- 取消由 setInterval() 设置的 timeout。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Window对象</title> </head> <body> <input id="openBtn" type="button" value="打开窗口"> <input id="closeBtn" type="button" value="关闭窗口"> <script> // alert 方法 alert("hello window"); window.alert("hello a"); // confirm 方法 var flag = confirm("您确定要退出吗？"); if (flag){ // 执行退出操作 alert("欢迎下次再光临！") }else{ alert("不要手抖哦!") } // prompt 方法 var result = prompt("请输入用户名"); alert(result); var openBtn = document.getElementById("openBtn"); var newWindow ; openBtn.onclick = function(){ newWindow =open("https://www.baidu.com"); } var closeBtn = document.getElementById("closeBtn"); closeBtn.onclick = function(){ newWindow.close(); } // 一次性定时器 // setTimeout("fun();",3000); var id = setTimeout(fun, 2000); clearTimeout(id); function fun(){ alert('boom~~~'); } // 循环定时器 // setInterval(fun, 2000); </script> </body> </html>
☛ 属性
① 获取其他BOM对象
history location Navigator Screen
② 获取DOM对象
document
☛ 特点
① Window对象不需要创建可以直接使用 window使用。 window.方法名()；
② window引用可以省略。 方法名()；
☛ 案例：轮播图
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <img id="banner_1" src="./imag/banner_1.jpg" width="100%"> <script> var number = 1; function fun(){ number++; // 判断number是否大于3 if(number > 3){ number = 1; } var image1 = document.getElementById("banner_1"); image1.src = "./imag/banner_"+number+".jpg"; } // 定时器 setInterval(fun, 3000); </script> </body> </html>
✔ Location：地址栏对象
☛ 创建（获取）：
① window.location ② location
☛ 方法：reload() --- 重新加载当前文档，即刷新
☛ 属性：href --- 设置或返回完整的 URL
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Location对象</title> </head> <body> <input type="button" id="btn" value="刷新"> <input type="button" id="go" value="去"> <script> // reload 方法，定义一个按钮，点击按钮，刷新当前页面 // 获取按钮对象 var button = document.getElementById("btn"); button.onclick = function(){ location.reload(); } // var h1 = location.href; // alert(h1); var button1 = document.getElementById("go"); button1.onclick = function(){ location.href="http://www.itcast.cn"; } </script> </body> </html>
☛ 案例：页面的自动跳转
<!DOCTYPE html> <html lang="en"> <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 timeElement = document.getElementById("time"); function showTime(){ second -- ; if (second<=0){ location.href="http://www.baidu.com"; } timeElement.innerHTML = second+""; } setInterval(showTime,1000); </script> </body> </html>
✔ History：历史记录对象
☛ 创建（获取）：
① window.history
② history
☛ 方法：
① back() 加载 history 列表中的前一个 URL
② forward() 加载 history 列表中的下一个 URL
③ go(参数) 加载 history 列表中的某个具体页面
参数： 正数 --- 前进几个历史记录
负数 --- 后退几个历史记录
☛ 属性：length --- 返回当前窗口历史列表中的 URL 数量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>History对象</title> </head> <body> <input type="button" id="btn" value="获取历史记录的个数"> <a href="9_History对象2.html">09页面</a> <input type="button" id="forward" value="前进"> <script> var button = document.getElementById("btn"); button.onclick = function(){ // 获取当前窗口历史记录个数 var length = history.length ; alert(length); } var button1 = document.getElementById("forward"); button1.onclick = function(){ history.forward() ; } </script> </body> </html>
