JavaScript循环（for循环，while循环，do...while），获取页面元素

84 阅读 0 评论 56 点赞

我是靠谱客的博主怕黑万宝路，最近开发中收集的这篇文章主要介绍JavaScript循环（for循环，while循环，do...while），获取页面元素，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、js循环

do…while与while的区别
（1）do…while,while是可以相互转换的
（2）do…while将先执行一遍循环体中的语句，然后才判断表达式的真假

while循环语法结构：while（条件语句）{循环体；}

do…while循环语法结构：do{
循环体；
增量/减量；
}
while（条件语句）；

for循环语法结构：for（初始表达式；条件；增量/减量）{
执行语句块；
}

例题：
输出小于“o”的字符(用到索引)

	var str='I Love JavaScript'; //赋值
	// alert(str.length); 返回字符串长度
	// alert(str[0]); [索引] 根据索引获取对应的字符
	for(var i=1;i<str.length;i++){
			// charAt(i)  表示获取索引所对应的的字符
			if(str.charAt(i)>='o'){
					continue;  //退出当前循环
			}
			document.write(str.charAt(i));
	}

二、获取页面元素（DOM操作）

（1）使用document对象的方法getElementByld
分析：在js中获取元素页面，必要的条件是获取元素的程序必须写在页面元素之后
先创建div元素，再通过js代码获取页面元素
（2）使用window.onload.function()
window 表示当前窗口
onload 表示页面的加载事项
function 表示事件处理程序

*重点：（1）通过js设置div元素样式
div.style.width=200+‘px’;
（2）通过js设置页面元素内容
1)使用属性innerHTML设置内容，可添加标签 // 注意是html
div.innerHTML=’ ‘;
2)使用属性innerTEXT设置内容 // text是文本不可添加文本以外的
div.innerTEXT=’ ';

例：

<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		window.function(){
				var div=document.getElementById('div_1');
				div.style.width=200+'px';
				div.style.height=200+'px';
				div.style.background='red';
				div.innerHTML='<h2>nihao</h2>';
				div.innerText='<h3>什么都无法阻挡梦想的脚步<h3/>';
				
				var div=document.getElementsByClassName('div_2');
				div[0].style.width=200+'px';  // div[0]:表示div的第一个数组‘这’
				div[0].style.height=200+'px';
				div[0].style.background='yellow';
				div[0].innerHTML='这是梦想';
				
				div[1].style.width=300+'px';
				div[1].style.height=300+'px';
				div[1].style.background='blueviolet';
				div[1].innerHTML='又';
			}
		</script>
</head>
<body>
		<div id="div_1">这是一个div元素</div>
		<div class="div_2">这</div>
		<div class="div_2">又</div>
		<script type="text/javascript">
			/*var div=document.getElementById('div_1');//[object HTMLDivElement]
			alert(div);*/
		</script>
</body>