快捷導(dǎo)航

javascript DOM編程實(shí)例(智播客學(xué)習(xí))

更新時(shí)間：2009年11月23日 00:03:05 作者：

最近一直在努力學(xué)習(xí)DOM編程這塊，這是目前成就感最強(qiáng)烈的一塊了，畢老師很認(rèn)真的給我們講解了相關(guān)知識(shí)，并在網(wǎng)上找了很多做的非常棒的網(wǎng)頁作為例程給我們進(jìn)行講解

并給我們講解了很多關(guān)于如何去學(xué)習(xí)DOM的方法，覺得真的是受益匪淺啊.
下面就幾個(gè)我覺得比較好的例子和大家分享一下。
1.二級(jí)連動(dòng)下拉菜單（一級(jí)是省份，二級(jí)是城市，要求一級(jí)選中省份，二級(jí)城市對(duì)應(yīng)出現(xiàn)）
步驟：1）基本框架（HTML）：兩個(gè)復(fù)選框，而第二個(gè)復(fù)選框里面開始應(yīng)該是沒有選項(xiàng)的，注意第一個(gè)下拉框會(huì)作為事件源，通過 onchange方法激發(fā)JavaScript中的功能實(shí)現(xiàn)部分。

復(fù)制代碼代碼如下:

 
<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）頁面修飾不需要太多，只要讓下拉菜單顯示一個(gè)就好了
3）通過JavaScript來實(shí)現(xiàn)功能，我們要想在第一個(gè)下拉列表中選擇省份，后面能直接顯示他的城市，看到這種一對(duì)多對(duì)應(yīng)關(guān)系，首先想到map集合這個(gè)容器，可是JavaScrip沒有map集合，那我們就想到了數(shù)組這樣一個(gè)容器，最后決定用二維數(shù)組來幫我我們實(shí)現(xiàn)這個(gè)功能。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function selCity() 
{ 
var arr= [["--選擇城市--"],["海淀區(qū)","朝陽區(qū)","東城區(qū)","西城區(qū)","宣武區(qū)"], 
["和平區(qū)","河北區(qū)","河?xùn)|區(qū)","河西區(qū)","南開區(qū)"], 
["武漢","宜昌","孝感","襄樊","荊州"], 
["濟(jì)南","青島","煙臺(tái)","威海","日照"], 
["石家莊","保定","張家口","廊坊","邯鄲"]]; 
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> 

小結(jié)：每次一定記得要將數(shù)組清空。
2.郵件列表
思想：1）首先想到整體框架，肯定會(huì)想到用表格來進(jìn)行格式化，然后通過操作表格以及行和單元格這些節(jié)點(diǎn)來實(shí)現(xiàn)相關(guān)功能
2）css主要是對(duì)表格相關(guān)格式化，其次就是選中以及兩行顯示不一樣的效果,通過動(dòng)態(tài)修改className來實(shí)現(xiàn)
由于篇幅的關(guān)系，html以及css部分代碼相對(duì)簡(jiǎn)單，就不獻(xiàn)丑了。
3）JavaScript來實(shí)現(xiàn)各種不同功能，代碼如下：

復(fù)制代碼代碼如下:

 
<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;//將原有的值記錄，一遍鼠標(biāo)走后能回到原來的顏色 
this.className = "checked"; 
} 
arr[x].onmouseout = function() 
{ 
this.className = color; 
} 
} 
} 
//我們需要全選實(shí)現(xiàn)同樣的功能，所以我們通過傳值來區(qū)分是那個(gè)節(jié)點(diǎn) 
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);//將自己狀態(tài)反向賦給自己實(shí)現(xiàn)反選功能 
else 
mailNodes[x].checked = num; 
} 
} 
function del() 
{ 
var b = window.confirm("確定要?jiǎng)h除所選郵件嗎？"); 
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> 