for循环（注意是中括号）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
width: 200px;
height: auto;
}
</style>
</head>
<body>
<div id="box">
<input type = "button" value ="点" id = "btn1">
<div id="val"></div>
</div>
</body>
</html>
<script type="text/javascript">
var oVal = document.getElementById("val");
var oBtn1 = document.getElementById("btn1");
var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.png'];
var str ="";
oBtn1.onclick = function(){
//oVal.innerHTML += '<img src = "img/1.jpg" alt ="" />'
for(var i = 0; i<arr.length; i++){
//oVal.innerHTML += '<img src = "'+arr[i]+'" alt ="" />';性能不好,每次都在操作页面
str += '<img src = "'+arr[i]+'" alt ="" />';
}
oVal.innerHTML = str;
}
</script>显示结果
获取元素的第二种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="ul1">
<!-- <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li> -->
</ul>
<ol>
<li>5</li>
<li>6</li>
</ol>
</body>
</html>
<script type="text/javascript">
/*
geElementById 是获取一个 ---->是一个静态方法
getElementsByTagName 是获取一堆元素 ---->是一个动态方法
(在没有li的时候也能获取到后续操作产生的li)
会把元素放在数组里，通过数组下标来控制元素，即使只有一个元素也需要下标来控制
*/
var oUl1 = document.getElementById("ul1");
//var oLi = document.getElementsByTagName("li");
var oLi = oUl1.getElementsByTagName("li");//这样的话相当于在ul1中去找li
for(var i =0;i<5;i++){
oUl1.innerHTML += '<li>'+i+'</li>';
}
alert(oLi.length);
</script>显示结果
