JavaScript之BOM对象讲解

最新推荐文章于 2022-06-07 20:07:02 发布

囿于之间

最新推荐文章于 2022-06-07 20:07:02 发布

阅读量124

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43637366/article/details/104384222

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、概念

Browser Object Model 浏览器对象模型，将浏览器各个组成部分封装成对象

二、组成

window：窗口对象
Navigator：浏览器对象 （不常用）
Screen：显示器屏幕对象   （不常用）
History：历史记录对象
Location：地址栏对象

三、常用对象讲解及实例

1.window：窗口对象

主要方法
a.与弹出框有关方法

alert()：显示带有一段消息以及一个确认按钮的警告框

confirm()：显示带有一段消息以及确定按钮和取消按钮的对话框
如果用户点击确定按钮则方法返回true，如果点击取消，方法返回false

prompt()：显示用户输入框
返回值用来获取用户输入值

案例：

<script>
		window.alert("1");
		var flag = confirm("退出么？");
		if(flag){
			alert("欢迎再次光临");
		}else{
			alert("手别抖");
		}
		
		var result = prompt("请输入用户名");
		alert(result);
</script>

b.与打开关闭有关的方法

close()：关闭浏览器窗口，默认关闭当前窗口
open()：打开一个新的浏览器窗口

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window对象</title>
		
	</head>
	<body>
		<input id="openbtn" type="button" value="打开窗口"/>
		<input id="closebtn" type="button" value="关闭窗口"/>
		<script>
			open();
			var openbtn = document.getElementById("openbtn");
			var newWindow;
			openbtn.onclick = function(){
				newWindow = open("http://www.baidu.com");   //打开百度
			}
			var closebtn = document.getElementById("closebtn");
			closebtn.onclick = function(){
				newWindow.close();      //关闭窗口
			}
		</script>
	</body>
</html>

c.与定时器有关的方法

setTimeout()：在指定毫秒数后调用函数或计算表达式
		  参数：1.js代码或者方法函数对象
		       2.毫秒值
  clearTimeout()：取消由setTimeout() 方法设置的timeout
  setInterval()：按照指定周期（以毫秒计）来调用函数或表达式
  clearInterval()：取消由setInterval()设置的timeout

案例一：

<script>
		//一次性定时器
		setTimeout("fun();",3000);
		var id = setTimeout(fun,3000);
		clearTimeout(id);//加该代码直接关闭定时器
		function fun(){
			alert('boom');
		}
		
		//循环定时器
		var di = setInterval(fun,2000);
		clearInterval(di);//加该代码直接关闭定时器
		function fun(){
			alert('boom');
		}
</script>

案例二（轮播图）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
	</head>
	<body>
		<img id="img" src="imgs/1.jpg" width="100%"/>
		
		<script>
			//修改图片src属性方法
			var number = 1;
			function fun(){
				number++;
				var img = document.getElementById("img");
				if(number == 5){
					number = 1;
				}
				img.src = "imgs/" +number+".jpg";
			}
			//定义定时器
			setInterval(fun,3000);
		</script>
	</body>
</html>

主要属性
1.获取其他BOM对象：

history
location
Navigator
Screen

2.获取DOM对象

特点
*window对象不需要创建可以直接使用。window.方法名();
*window引用可以省略。方法名();

2.Location：地址栏对象

创建（获取）

1.window.location
2.location

方法

*back()：加载history列表中的前一个URL
*forward()：加载history列表中的下一个URL
*go(参数)：加载history列表中的具体某个页面，参数为整数，正数前进几个页面，负数后退几个页面

属性
*length：返回当前窗口历史列表记录个数

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Location对象</title>
	</head>
	<body>
		<input type="button" id="btn" value="刷新"/>
		<input type="button" id="gobd" value="百度"/>
		<script>
			//reload方法，定义一个按钮，点击按钮，刷新当前页面
			//1.获取按钮
			var btn = document.getElementById("btn");
			//2.绑定单击事件
			btn.onclick = function(){
				//3.刷新
				location.reload();
			}
			//获取href
			//点击按钮去访问百度
			var gobd = document.getElementById("gobd");
			gobd.onclick = function(){
				location.href = "https://www.baidu.com";
			}
		</script>
	</body>
</html>

3.History：当前window窗口历史记录对象

创建（获取）

1.window.history
2.history

方法

*back()：加载history列表中的前一个URL
*forward()：加载history列表中的下一个URL
*go(参数)：加载history列表中的具体某个页面，参数为整数，正数前进几个页面，负数后退几个页面

属性
*length：返回当前窗口历史列表记录个数

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>History</title>
	</head>
	<body>
		<input type="button" id="btn" value="获取历史记录个数" />
		<a href="轮播图.html">跳转至轮播图</a>
		<input type="button" id="forward" value="前进" />
		
		<script>
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				var length = history.length;
				alert(length);
			}
			
			var forward = document.getElementById("forward");
			forward.onclick = function(){
				history.forward();
			}
		</script>
	</body>
</html>

本篇博客就介绍到这里，如发现错误或有疑问请及时提出

囿于之间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript之BOM对象讲解

一、概念Browser Object Model 浏览器对象模型，将浏览器各个组成部分封装成对象二、组成window：窗口对象Navigator：浏览器对象（不常用）Screen：显示器屏幕对象（不常用）History：历史记录对象Location：地址栏对象三、常用对象讲解及实例1.window：窗口对象主要方法a.与弹出框有关方法alert()：显示带有一段消...
复制链接

扫一扫