JavaScript 新手入门：刷新页面，图片更新！

最新推荐文章于 2024-04-27 00:32:22 发布

梦想成为行业大牛

最新推荐文章于 2024-04-27 00:32:22 发布

阅读量838

点赞数 24

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_80660386/article/details/138172156

版权

每日一题，题题提升！

文章目录

前言
一、获取DOM元素的方式
二、案例
- 1.获取图片
- 2.更新图片
总结

前言

今天我接触到了一个新的名词——DOM（页面文档对象模型），能够操作网页内容，开发网页内容特效和实现用户交互效果，本文旨在重点介绍获取DOM元素的方式以及实现一个简单的案例！

一、获取DOM元素的方式

1.根据CSS选择器来获取

a.选择匹配第一个元素！只能匹配到第一个元素

document.querySelector('css选择器');

b.选择匹配多个元素

	document.querySelectorAll('CSS选择器');

2.其他方式

	        /* 根据id获取一个元素 */
			document.getElementById('id');
			/* 根据标签获取一类元素：例如获取所有div标签元素 */
			document.getElementsByTagName('div');
			/* 根据类名获取一类元素 */
			document.getElementsByClassName('class');

二、案例

分析一下~~~

1.获取图片

a.随机数生成函数

<!--  随机数生成-->
			function getRandom(N,M){
				return Math.floor(Math.random()*(M-N+1))+N
			}

b.获取图片

/* 获取图片 */
const img = document.querySelector('img')

2.更新图片

代码如下（示例）：

/* 更换图片路径 */
img.src =`img/易烊千玺/${random}.png`

3.案例总体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面更新图片随机更新</title>
	</head>
	<style>
		.tupian{
			width: 800px;
			height: 500px;
			padding-left:200px ;
			padding-right: 100px;
			padding-top: 20px;
		}
		#biaoti{
			text-align: center;
		}
	</style>
	<body>
		<h1 id="biaoti">易烊千玺</h1>
		<img  class="tupian"src="img/易烊千玺/1.png" alt="">

		<script>
			<!--  随机数生成-->
			function getRandom(N,M){
				return Math.floor(Math.random()*(M-N+1))+N
			}
			/* 获取图片 */
			const img = document.querySelector('img')
			/* 随机得到序号 */
			const random = getRandom(1,19)
			/* 更换图片路径 */
			img.src =`img/易烊千玺/${random}.png`
		</script>
	</body>
</html>

总结

学习是一个长期的过程，我相信有努力就一定有回报！

梦想成为行业大牛

关注

24
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
JavaScript 新手入门：刷新页面，图片更新！

今天我接触到了一个新的名词——DOM（页面文档对象模型），能够操作网页内容，开发网页内容特效和实现用户交互效果，本文旨在重点介绍获取DOM元素的方式以及实现一个简单的案例！学习是一个长期的过程，我相信有努力就一定有回报！
复制链接

扫一扫