1，首先呢我們要說一下通過標簽選擇元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過標簽獲取元素</title>
<script type="text/javascript">
window.onload = function(){
// //獲取頁面上所有的li
// var aLi = document.getElementsByTagName('li');
//獲取id為list01的ul
var oList = document.getElementById('list01');
//再獲取這個ul下的所有li
var aLi = oList.getElementsByTagName('li');
alert(aLi.length);//8
// aLi.pop();//錯誤用法，aLi是一個類似數組的選擇集，沒有數組通用的一些方法
aLi[0].style.backgroundColor = 'gold';
aLi[1].style.backgroundColor = 'gold';
}
</script>
</head>
<body>
<ul id="list01">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul id="list02">
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</body>
</html>
2，在然后呢，我們說一下循環語句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循環語句</title>
<script type="text/javascript">
/*
循環語句：
通過循環語句可以反復的執行一段代碼多次
while循環
- 語法：
while(條件表達式){
語句...
}
- while語句在執行時，
先對條件表達式進行求值判斷，
如果值為true，則執行循環體，
循環體執行完畢以后，繼續對表達式進行判斷
如果為true，則繼續執行循環體，以此類推
如果值為false，則終止循環
do...while循環
- 語法：
do{
語句...
}while(條件表達式)
- 執行流程：
do...while語句在執行時，會先執行循環體，
循環體執行完畢以后，在對while后的條件表達式進行判斷，
如果結果為true，則繼續執行循環體，執行完畢繼續判斷以此類推
如果結果為false，則終止循環
實際上這兩個語句功能類似，不同的是while是先判斷后執行，
而do...while會先執行后判斷，
do...while可以保證循環體至少執行一次，
而while不能
for語句，也是一個循環語句，也稱為for循環
在for循環中，為我們提供了專門的位置用來放三個表達式：
1.初始化表達式
2.條件表達式
3.更新表達式
for循環的語法：
for(①初始化表達式;②條件表達式;④更新表達式){
③語句...
}
for循環的執行流程：
①執行初始化表達式，初始化變量（初始化表達式只會執行一次）
②執行條件表達式，判斷是否執行循環。
如果為true，則執行循環③
如果為false，終止循環
④執行更新表達式，更新表達式執行完畢繼續重復②
任意一種循環都可以互相嵌套
*/
window.onload = function(){
var oList = document.getElementById('list01');
var aLi = oList.getElementsByTagName('li');
/*for (var i = 0; i < aLi.length; i++) {
if(i % 2 == 0){
aLi[i].style.background = 'gold';
}
}*/
/*for(var j in aLi){
aLi[j].style.background = 'red';
}*/
//創建一個循環，往往需要三個步驟
//1.創初始化一個變量
var j = 0;
//2.在循環中設置一個條件表達式
while(j < aLi.length){
aLi[j].style.background = 'gold';
//3.定義一個更新表達式，每次更新初始化變量
j++;
}
/*
以下是死循環的寫法
像這種將條件表達式寫死為true的循環，叫做死循環
該循環不會停止，除非瀏覽器關閉，死循環在開發中慎用
可以使用break，來終止循環
*/
/*while(true){
if(j>10){
break;//退出整個循環
}
j++;
}
//for循環的死循環寫法
for(;;){
}*/
/*
break關鍵字可以用來退出switch或循環語句
不能在if語句中使用break和continue
break關鍵字，會立即終止離他最近的那個循環語句
continue關鍵字可以用來跳過當次循環
同樣continue也是默認只會對離他最近的循環循環起作用
*/
/*
可以為循環語句創建一個label，來標識當前的循環
label:循環語句
使用break語句時，可以在break后跟著一個label，
這樣break將會結束指定的循環，而不是最近的
*/
outer:
for(var i=0 ; i<5 ; i++){
console.log("@外層循環"+i);
for(var j=0 ; j<5; j++){
console.log("內層循環:"+j);
break outer;
}
}
}
</script>
</head>
<body>
<ul id="list01">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
