JavaScript中循环（while循环，do...whlie循环)，JavaScript中获取页面元素

最新推荐文章于 2024-01-06 09:00:00 发布

王大瑜

最新推荐文章于 2024-01-06 09:00:00 发布

阅读量435

点赞数 1

本文链接：https://blog.csdn.net/WangY321/article/details/89243724

版权

while循环

语法结构：
while (逻辑条件){
循环体
}

输出1-100之间的偶数

<script type="text/javascript">
	var num2=0;
	while (num2<=99){
	num2+=2;
	document.write(num2+'<br />');
	}
</script>

do…whlie循环

特点：无论条件是否成立，都会输出一次语句体的内容
语法结构：
do{
循环体
}while(最终退出循环的条件)

var num1=5;
do{
	num1++;
	if(num1==10){
		break;
	}
	document.write(num1);
}while(num1>10)

while和do…while的区别
while语句先判断是否符合条件，然后再执行循环体语句；
do…while语句先执行循环体语句一次，然后再判断是否符合条件。

JavaScript中获取页面元素

可以使用内置对象 document 上的 getElementById 方法来获取页面上设置了 id 属性的元素，获取到的是一个 html 对象，然后将它赋值给一个变量

<head>
		<meta charset="utf-8" />
		<title></title>
		  <script type="text/javascript">
		         var div = document.getElementById('div1');
		  </script>
		</head>

<body>
		<div id="div1"></div>
</body>

上面的语句，如果把 javascript 写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript 去页面上获取元素 div1 的时候，元素 div1 还没有加载
解决方法有两种：
第一种方法：将 javascript 放到页面最下边

<body>
		<div id="div1"></div>
		<script type="text/javascript">
		         var div = document.getElementById('div1');
		 </script>
</body>

第二种方法：将 javascript 语句放到 window.onload 触发的函数里面, 获取元素的语句会在页面加载完后才执行

<head>
		<meta charset="utf-8" />
		<title></title>
		  <script type="text/javascript">
               window.onload = function() {
				var div = document.getElementById('div1');
				div.style.width = 200 + 'px';
				div.style.height = 200 + 'px';
				div.style.background = 'red';
				}
		 </script>
</head>

window 表示当前页面
onload 表示页面的加载时间
function 表示事件处理程序

通过JavaScript设置页面元素的内容

使用属性innerHTML设置内容；

div.innerHTML='<h3>学的不仅是技术，更是梦想</h3>'

使用属性innerText设置内容；

div[0].innerText='<h3>学的不仅是技术，更是梦想</h3>'

innerHTML和innerText区别

innerHTML可以设置内容，也可以添加标签

innerText只可以设置内容

window.onload = function() {
				var div = document.getElementsByClassName('div2');
				div[0].style.width = 300 + 'px';
				div[0].style.height = 300 + 'px';
				div[0].style.background = 'yellow';
				div[0].innerText='<h3>学的不仅是技术，更是梦想</h3>';
			}

在这里插入图片描述

王大瑜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中循环（while循环，do...whlie循环)，JavaScript中获取页面元素

while循环语法结构：while (逻辑条件){循环体 }输出1-100之间的偶数<script type="text/javascript"> var num2=0; while (num2<=99){ num2+=2; document.write(num2+'<br />'); }</script>do…whlie循环...
复制链接

扫一扫