JS的BOM操作详解

最新推荐文章于 2024-04-23 09:10:13 发布

T型人小付

最新推荐文章于 2024-04-23 09:10:13 发布

阅读量666

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Victor2code/article/details/106601082

版权

前端专栏收录该内容

26 篇文章 2 订阅

订阅专栏

BOM，全称Browser Object Model，浏览器对象模型，是一个用于访问浏览器和计算机屏幕的对象集合。这一节我们来总结下JS的BOM操作。

文章目录

页面跳转与历史

window.location可以操作页面跳转，window.history会记录页面访问历史。

在项目根目录下创建三个h5页面，三个页面内容分别如下

index.html

<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
		<title></title>				
	</head>
	<body>	
		<button type="button" onclick="jumpToRed()">Red Page</button>
	</body>
</html>

这是主页面，只有一个按钮，点击执行js函数，跳转到红色页面。

red.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Red</title>
		<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="background-color: red;">
		<button type="button" onclick="jumpToYellow()">Yellow Page</button>
		<button type="button" onclick="jumpToPrevious()">Previous</button>
	</body>
</html>

背景色为红色，有两个按钮，点击分别执行js函数跳转到黄色页面和上个页面。

yellow.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Yellow</title>
		<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="background-color: yellow;">
		<button type="button" onclick="jumpToOrigin()">Back</button>
	</body>
</html>

背景色为黄色，有一个按钮，点击跳转到主页面。

下面是引入的js文件test.js

function jumpToRed(){
	window.location.href='red.html';
}

function jumpToYellow(){
	window.location.assign('yellow.html');
}

function jumpToPrevious(){
	window.history.back();
}

function jumpToOrigin(){
	// console.log(window.history)
	window.history.go(1-parseInt(window.history.length))
}

这里window.location的href属性和assign方法都可以进行页面跳转，会直接修改url路径的最后一部分，如果跳转目的页面和原页面在同一目录下，直接用文件名即可。这两种方式都会记录历史页面，而另一种window.location.replace()方式则不会记录历史页面。而window.history是一个object类型，其中的length属性是历史页面的个数，back()和forward()方法分别是后退和前进，go()方法则是跳转，接的参数是跳转的个数，为负数是向后跳。

页面打开和关闭

打开和关闭比较简单，直接用window.open()和window.close()即可。

修改下index.html内容如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
		<title></title>				
	</head>
	<body>	
		<button type="button" onclick="openNewPage()">New Page</button>
	</body>
</html>

这里有一个按钮，点击运行js函数在新窗口打开红色页面。

修改red.html如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Red</title>
		<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="background-color: red;">
		<button type="button" onclick="closeCurrentPage()">Close Page</button>
	</body>
</html>

这里也有一个按钮，点击运行js函数关闭当前窗口。

修改引入的js文件test.js如下

function openNewPage(){
	window.open('red.html','_blank','width=400px,height=100px,top=20px,left=10px');
}
function closeCurrentPage(){
	window.close();
}

这里的window.open()接3个参数，分别是页面的文件名，打开的位置（和h5中的a标签一样可选_blank或者_self），尺寸和位置属性。

注意，这里打开和关闭的都是标签页，而不是窗口，只有当window.open()带了第三个参数的时候才会在新窗口打开新标签页。

页面加载事件处理

事件就是在某种情况发生的时候处理一段代码。

修改index.html内容如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
		<title></title>				
	</head>
	<body>	
	<script>
		alert('Hello from body tag');
	</script>
	</body>
</html>

这里body中运行了一段代码，弹出一句话。

引入的test.js内容如下

window.onload=()=>{
	alert('Hello from  onload');
}

这里的window.onload事件也弹出一句话，但是因为onload事件是页面加载完毕以后才执行，所以虽然位置靠前，onload的内容会靠后弹出。

所以一些让页面加载后执行的脚本都会放在window.onload()当中。

页面滚动事件处理

页面滚动事件可以实现类似动态加载的效果。

修改index.html如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
		<title></title>				
	</head>
	<body style="height:3000px;">	
	</body>
</html>

这里将body元素的高度设置为3000px是为了将滚动条显示出来。

test.js内容如下

window.onscroll=()=>{
	var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
	console.log(scrollTop);
}

这里是动态获取滚动条高度，注意计算机中原点是左上角，所以滚动条越往下高度越高。

可以在滚动条高度到达临界点的时候执行动态加载的操作，这里就不深入了。

页面尺寸变化事件处理

页面尺寸变化事件可以针对不同尺寸的页面展示不同效果。

修改index.html内容如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
		<title></title>				
	</head>
	<body>	
	</body>
</html>

一个空的h5页面。

修改test.js内容如下

window.onresize=()=>{
	var w=document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
	var h=document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
	console.log(w,h);
}

打印出页面的宽和高。

虽然这样子可以对页面做动态响应，但是现在很少有人会用这个事件去做了。

定时器操作

定时器是实现页面元素动态效果的基础。

间歇性定时器

间歇性定时器每隔一个周期执行一个函数。

修改index.html如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
		<title></title>				
	</head>
	<body>	
	<button type="button" onclick="stopTimer()">Stop Timer</button>
	<button type="button" onclick="restartTimer()">Restart Timer</button>
	<script type="text/javascript">
		var timer=window.setInterval(()=>{
			console.log('Hellow Timer');
		},2000);
		
		function stopTimer(){
			window.clearInterval(timer);
		}
		
		function restartTimer(){
			timer=window.setInterval(()=>{
				console.log('Hellow Timer');
			},2000);
		}
	</script>
	</body>
</html>

其中页面加载的时候会自动启动定时器timer，每隔2秒打印一次字符串。JS中的定时器只能创建和消除，并不能中途停止。页面两个按钮，一个点击消除定时器，一个点击重启定时器。注意这里是重新对timer赋值，不能加var关键字，不然变成局部变量，就无法在另一个函数中被消除。

延时定时器

延时定时器是一段时间之后单次执行函数。

修改index.html内容如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
		<title></title>				
	</head>
	<body>	
	<script type="text/javascript">
		var timer=window.setTimeout(()=>{
			console.log('Hello Timer');
		},3000);
	</script>
	</body>
</html>

页面加载3秒钟以后打印一次字符串。

我是T型人小付，一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我，如果有问题欢迎在底下的评论区交流，谢谢。

T型人小付

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS的BOM操作详解

BOM，全称Browser Object Model，浏览器对象模型，是一个用于访问浏览器和计算机屏幕的对象集合。这一节我们来总结下JS的BOM操作。文章目录页面跳转与历史页面打开和关闭页面加载事件处理页面滚动事件处理页面尺寸变化事件处理定时器操作间歇性定时器延时定时器页面跳转与历史window.location可以操作页面跳转，window.history会记录页面访问历史。在项目根目录下创建三个h5页面，三个页面内容分别如下index.html<html> <head&g
复制链接

扫一扫