JavaScript DOM编程实战：二级联动菜单与邮件列表管理

JavaScript DOM编程实战：二级联动菜单与邮件列表管理

本文分享了关于学习DOM（文档对象模型）的有效方法，内容详实，对读者理解DOM编程具有显著的启发意义。

接下来，我们将重点介绍几个具有代表性的DOM应用案例，供读者参考与实践。

二级联动下拉菜单实现

案例一：实现二级联动下拉菜单（一级选项为省份，二级选项为城市，要求当用户选择特定省份时，城市列表自动更新以显示对应城市）。

实现步骤：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功能实现：为了实现省份与城市的一对多映射关系，虽然JavaScript原生不支持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>

关键点总结：在每次更新城市列表前，务必清空原有选项，以避免数据累积。

邮件列表管理功能

案例二：邮件列表管理功能。

设计思路：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>