BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
Window:窗口对象
1. 创建
2. 方法
1. 与弹出框有关的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮,则方法返回true
* 如果用户点击取消按钮,则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值:获取用户输入的值
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<img id="demo" src="images/d.png">
<script> //弹窗 alert("hello window") //弹窗带确认和取消 confirm("您确定要退出吗") //弹窗带输入框 let str = prompt("请输入用户名") //获取输入框内容并且弹出 alert(str) </script>
</body>
</html>
效果
与打开关闭有关的方法:
close() 关闭浏览器窗口。
* 谁调用我 ,我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<input id="open" type="button" value="打开百度">
<input id="close" type="button" value="关闭百度">
<script> //通过id获取按钮元素 let demo = document.getElementById("open") //定义新弹窗对象 var newWindow //绑定单击事件 demo.onclick=function (){ //单击事件对应的操作 newWindow=open("https://www.baidu.com/") } //通过id获取关闭按钮元素 let demo2 = document.getElementById("close") //绑定单击事件 demo2.onclick=function (){ //关闭新窗口 newWindow.close() } </script>
</body>
</html>
效果
与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数:
1. js代码或者方法对象
2. 毫秒值
* 返回值:唯一标识,用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script> //一次性定时器 let id1=setTimeout("fun()",3000) //定义定时器对应函数 function fun(){ alert("boom~~") } //取消定时器 //clearTimeout(id1) //循环定时器 let id2=setInterval(fun,2000) //取消定时器 clearInterval(id2) </script>
</body>
</html>
效果
属性
1. 获取其他BOM对象:
history
location
Navigator
Screen:
2. 获取DOM对象
document
注意
1. 创建(获取):
1. window.location
2. location
2. 方法:
* reload() 重新加载当前文档。刷新
3. 属性
* href 设置或返回完整的 URL。
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="btn2" value="我的博客">
<script> //reload刷新页面 let btn = document.getElementById("btn") //给btn绑定单击事件 btn.onclick=function (){ //刷新页面 location.reload() } //获取href let href = location.href //弹出获取的内容 alert(href) //跳转 let btn2 = document.getElementById("btn2") //给btn2绑定单击事件 btn2.onclick=function (){ //跳转链接 location.href="https://blog.csdn.net/qq_50216270" } </script>
</body>
</html>
效果
自动跳转demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
//设置样式
<style> //设置p标签样式 p{ text-align: center; } //设置span标签样式 span{ color: red; } </style>
</head>
<body>
<p>
<span id="time">5</span>秒之后,自动跳转到首页。。。
</p>
<script> //设置倒计时秒数 var second=5 //设置倒计时函数 function showTime(){ //每次进入函数都将时间减1s second--; //当时间减完后自动跳转 if(second<=0){ location.href="https://www.baidu.com/" } //根据id获取span标签内容 let time=document.getElementById("time") //用innerHTML更改span内容 time.innerHTML=second+"" } //绑定循环函数,每1s调用一遍函数 setInterval(showTime,1000) </script>
</body>
</html>
1. 创建(获取):
1. window.history
2. history
2. 方法:
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数:
* 正数:前进几个历史记录
* 负数:后退几个历史记录
3. 属性:
* length 返回当前窗口历史列表中的 URL 数量。
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<input type="button" id="btn" value="获取历史记录">
<input type="button" id="forward" value="前进">
<input type="button" id="back" value="后退">
<script> //通过id获取按钮元素 let btn = document.getElementById("btn") //绑定单击事件的同时获取历史记录长度 let length=btn.onclick=history.length //弹出历史记录长度 alert(length) //根据id获取前进按钮元素 let forward = document.getElementById("forward") //绑定单击事件 forward.onclick=function (){ //调用前进函数 history.forward() //这里和go函数里面传参数1的用法是一样的 //==history.go(1) } //根据id获取back按钮元素 let back = document.getElementById("back") //绑定单击事件 back.onclick=function (){ //调用回退函数 history.back() //这里和go函数里面传参数-1的用法是一样的 //==history.go(-1) } </script>
</body>
</html>
效果
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/qq_50216270/article/details/117931765
内容来源于网络,如有侵权,请联系作者删除!