本文详细介绍了JavaScript中的BOM对象，包括Browser Object Model的概念、主要组成部分如window、location和history对象及其方法和属性。此外，还讲解了浏览器事件对象，探讨了如何利用BOM实现简易轮播图及导航历史操作。
一、BOM对象
1、概念
BOM，全名：Browser Object Model， 是指浏览器对象模型
DOM是将HTML文档中的各个元素封装成一个对象（Document)，而BOM则是将一个浏览器的各个组成部分封装成对象(Browwser)供调用使用。
2、BOM的组成
- window：浏览器窗口对象
- navigator：浏览器对象
- screen：浏览器所处客户端的显示器屏幕对象
- history：浏览器当前窗口的访问历史记录对象
- location：浏览器当前窗口的地址栏对象
3、window对象
window对象表示浏览器中打开的窗口
3.1 window对象方法
1、三个带弹出框的方法
| 方法名 | 用法 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
| prompt() | 显示可提示用户输入的对话框 |
2、与打开和关闭有关的方法
| 方法名 | 用法 |
|---|---|
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
| close() | 关闭浏览器窗口 |
案例：BOM对象的小案例
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{list-style: none;}
ul li{
width: 200px;
height: 30px;
border: 1px solid red;
padding-left: 10px;
}
</style>
</head>
<body>
<input type="text" id="content" placeholder="请输入内容">
<input type="button" id="add" value="添加节点">
<input type="button" value="打开新窗口" id="openNew">
<input type="button" value="关闭新窗口" id="closeNew">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var add = document.getElementById('add')
add.onclick=function(){
// console.log(confirm('你确定要添加吗？'));
if(test()){
if(confirm('你确定要添加吗？')==true){
// 创建节点
var li = document.createElement('li')
// 获取文本框中输入的值
var content = document.getElementById('content')
// 将文本框的值给创建的节点
li.innerHTML = content.value
// 获取ul标签
var ul = document.querySelector('.list')
// 将li添加到ul标签中
ul.appendChild(li)
alert('添加成功')
}else{
alert('不添加该节点')
}
}else{
alert('格式不正确！！！')
}
}
var newWindow;// 用来存储新打开的窗口
openNew.onclick=function(){
// open()可以打开新的窗口，返回给window
newWindow = window.open('https://www.baidu.com')
}
closeNew.onclick=function(){
// close()关闭打开的窗口
newWindow.close()
}
// 用来验证文本框输入的值的格式：只包含数字与字母并且不能为空
function test(){
// 正则表达式：只能是数字和字母，并且不能为空
var reg = /\b[a-zA-Z0-9]{1,}\b/
// 获取文本框中输入的值
var content = document.getElementById('content')
// test()返回一个布尔值:当满足正则表达式时，返回true,反之则返回false
console.log(reg.test(content.value));
if(reg.test(content.value)){
return true
}else{
return false
}
}
</script>
</body>
</html>3、 与定时器有关的方法
| 方法名 | 用法 |
|---|---|
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式（一次）。 |
| clearTimeout() | 取消由setTimeout()方法设置的时间。 |
| setlnterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式（多次）。 |
setTimeout()：指定时间后执行1次（只执行一次）
案例：使用定时器完成一个简易的轮播图
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
#list{
width: 500px;
height: 300px;
margin: 0 auto;
text-align: center;
position: relative;
}
#list img{
width: 500px;
height: 300px;
}
ul{
list-style: none;
display: flex;
justify-content: space-between;
width: 400px;
height: 30px;
position: absolute;
bottom: 0;
left: 0;
}
ul li{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.402);
}
.active{
background-color: rgba(0, 0, 0, 0.315);
}
</style>
</head>
<body>
<div id="list">
<img src="img/bg1.jpg" alt="">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var index = 1;
function changePic(){
var list = document.getElementById('list');
var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg']
// 如何更换图片
// 获取到图片img
var img = document.querySelector('#list img')
// 更改img的src来实现图片的切换
img.src='img/'+arr[index]
// console.log(index);
// 获取所有的li标签
var list = document.querySelectorAll('ul li')
// 将所有的li上面的active进行清楚
for(var i=0;i<list.length;i++){
list[i].classList.remove('active')
}
list[index].classList.add('active')
index++
if(index>5){
index=0
}
}
// 每个一秒切换一张图片，要用到定时器
var setImg = setInterval(changePic,1000)
list.addEventListener('mouseout', (event) => {
setImg = setInterval(changePic, 1000);
event.stopPropagation()
})
list.addEventListener('mouseover', () => {
clearInterval(setImg)
})
</script>
</body>
</html>3.2 window对象的属性
| 属性名 | 描述 | 通过window对象获取方法 |
|---|---|---|
| history | 对History对象的只读引用 | window.history |
| location | 对Location对象的只读引用 | window.location |
| navigator | 对Navigator对象的只读引用 | window.navigator |
| screen | 对Screen对象的只读引用 | window.screen |
4、Location对象
| 方法名 | 方法描述 |
|---|---|
| assign() | 加载新的文档 |
| reload() | 重新加载当前文档 |
| replace() | 用新文档替换当前文档 |
效果图：
<input type="button" value="assign" id="assign">
<input type="button" value="reload" id="reload">
<input type="button" value="replace" id="replace">
<input type="button" value="href" id="href">
<script>
assign.onclick=function(){
// assign():可以打开新的页面，并且可以返回，可以产生历史记录的
location.assign('https://www.baidu.com')
}
reload.onclick=function(){
// reload():实现页面刷新
console.log('aa');
location.reload()
}
replace.onclick=function(){
// replace():用新文档替换当前文档，可以实现打开新的页面的功能，但不能返回，故没有产生历史记录
location.replace('https://www.baidu.com')
}
href.onclick=function(){
location.href='https://www.baidu.com'
// console.log(location.host);
// console.log(location.hostname);
}
</script>5、History对象
| 方法 | 描述 |
|---|---|
| back() | 加载当前窗口history列表中的前一个URL |
| forward() | 加载当前窗口history列表中的下一个URL |
| go() | 加载当前窗口history列表中的某个具体页面 |
- back() 方法相当于后退按钮
- forward() 方法相当于前进按钮
- go(1) 代表前进1页，等价于forward() 方法
- go(-1) 代表后退1页，等价于back() 方法
效果图：
第一个页面：
<body>
1.html
<input type="button" value="跳转到2.html" id="btn">
<script>
btn.onclick=function(){
location.href='05-history2.html'
}
</script>
</body>第二个页面：
<body>
2.html
<input type="button" value="后退" id="btn">
<input type="button" value="跳转到3.html" id="btn2">
<input type="button" value="forward" id="btn3">
<input type="button" value="go" id="btn4">
<script>
btn.onclick=function(){
history.back()//后退到历史记录列表的上一个url
}
btn2.onclick=function(){
location.href='05-history3.html'
}
btn3.onclick=function(){
history.forward()//前进到历史记录列表的下一个url
}
btn4.onclick=function(){
history.go(1)
}
</script>
</body>第三个页面：
<body>
3.html
<input type="button" value="后退" id="btn">
<input type="button" value="跳转到1.html" id="btn2">
<script>
btn.onclick=function(){
history.back()//后退
}
btn2.onclick=function(){
history.go(-2)
}
</script>
</body>二、浏览器事件对象
| 事件 | 说明 |
|---|---|
| onload() | 对象装载完成后触发 |
| onscroll() | 窗口的滚动条被拖动时触发 |
| onresize() | 窗口的大小改变时触发 |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
