javascript DOM編程執行個體(智播客學習)

並給我們講解了很多關於如何去學習DOM的方法，覺得真的是受益匪淺啊.
下面就幾個我覺得比較好的例子和大家分享一下。
1.二級連動下拉式功能表（一級是省份，二級是城市，要求一級選中省份，二級城市對應出現）
步驟：1）基本架構（HTML）：兩個複選框，而第二個複選框裡面開始應該是沒有選項的，注意第一個下拉框會作為事件來源，通過 onchange方法激發JavaScript中的功能實現部分。 複製代碼 代碼如下:<xmp>
<select id="province" onchange="selCity()">
<option >--選擇省份--</option>
<option >北京</option>
<option >天津</option>
<option >湖北</option>
<option >山東</option>
<option >河北</option>
</select>
<select id="city">
<option>--選擇城市--</option>
</select>
</xmp>

2）頁面修飾不需要太多，只要讓下拉式功能表顯示一個就好了
3）通過JavaScript來實現功能，我們要想在第一個下拉式清單中選擇省份，後面能直接顯示他的城市，看到這種一對多對應關係，首先想到map集合這個容器，可是JavaScrip沒有map集合，那我們就想到了數組這樣一個容器，最後決定用二維數組來幫我我們實現這個功能。 複製代碼 代碼如下:<script type="text/javascript">
function selCity()
{
var arr= [["--選擇城市--"],["海澱區","朝陽區","東城區","西城區","宣武區"],
["和平區","河北區","河東區","河西區","南開區"],
["武漢","宜昌","孝感","襄樊","荊州"],
["濟南","青島","煙台","威海","日照"],
["石家莊","保定","張家口","廊坊","邯鄲"]];
var selpNode = document.getElementById("province");
var selcNode = document.getElementById("city");
var citys = arr[selpNode.selectedIndex];
selcNode.options.length = 0;
for(var x=0; x<citys.length; x++)
{
var optNode = document.createElement("option");
optNode.innerText = citys[x];
selcNode.appendChild(optNode);
}
}
</script>

小結：每次一定記得要將數組清空。
2.郵件清單
思想：1）首先想到整體架構，肯定會想到用表格來進行格式化，然後通過動作表格以及行和儲存格這些節點來實現相關功能
2）css主要是對錶格相關格式化，其次就是選中以及兩行顯示不一樣的效果,通過動態修改className來實現
由於篇幅的關係，html以及css部分代碼相對簡單，就不獻醜了。
3）JavaScript來實現各種不同功能，代碼如下： 複製代碼 代碼如下:<script>
var color ="";
function getStyle()
{
var tableNode =document.getElementsByTagName("table")[0];
var arr = tableNode.rows;
for(var x = 0;x<arr.length;x++)
{
if(x%2)
arr[x].className = "one";
else
arr[x].className = "two";
var tdNode0 = arr[x].cells[0];
tdNode0.align = "center";
arr[x].onmouseover = function()
{
color = this.className;//將原有的值記錄，一遍滑鼠走後能回到原來的顏色
this.className = "checked";
}
arr[x].onmouseout = function()
{
this.className = color;
}
}
}
//我們需要全選實現同樣的功能，所以我們通過傳值來區分是那個節點
function allCheck(index)
{
var allNode = document.getElementsByName("all")[index];
var checkNodes = document.getElementsByName("mail");
for(var x=0;x<checkNodes.length;x++)
{
checkNodes[x].checked = allNode.checked;
}
}
function checkBut(num)
{
var mailNodes = document.getElementsByName("mail");
for(var x=0; x<mailNodes.length; x++)
{
if(num>1)
mailNodes[x].checked = !(mailNodes[x].checked);//將自己狀態反向賦給自己實現反選功能
else
mailNodes[x].checked = num;
}
}
function del()
{
var b = window.confirm("確定要刪除所選郵件嗎？");
if(!b)
return ;
var mailNodes = document.getElementsByName("mail");
var arr = new Array();
var pos = 0;
for(var x=0; x<mailNodes.length; x++)
{
if(mailNodes[x].checked)
{
var trNode = mailNodes[x].parentNode.parentNode;
arr[pos++] = trNode;
}
}
for(var x=0; x<arr.length; x++)
{
arr[x].parentNode.removeChild(arr[x]);
}
getStyle();
}
window.onload = getStyle;
</script>