并给我们讲解了很多关于如何去学习dom的方法，觉得真的是受益匪浅啊.
下面就几个我觉得比较好的例子和大家分享一下。
1.二级连动下拉菜单（一级是省份，二级是城市，要求一级选中省份，二级城市对应出现）
步骤：1）基本框架（html）：两个复选框，而第二个复选框里面开始应该是没有选项的，注意第一个下拉框会作为事件源，通过 onchange方法激发javascript中的功能实现部分。
复制代码 代码如下:
2）页面修饰不需要太多，只要让下拉菜单显示一个就好了
3）通过JavaScript来实现功能，我们要想在第一个下拉列表中选择省份，后面能直接显示他的城市，看到这种一对多对应关系，首先想到map集合这个容器，可是JavaScrip没有map集合，那我们就想到了数组这样一个容器，最后决定用二维数组来帮我我们实现这个功能。
复制代码 代码如下:
<script type="text/javascript"> <br>function selCity() <br>{ <br>var arr= [["--选择城市--"],["海淀区","朝阳区","东城区","西城区","宣武区"], <br>["和平区","河北区","河东区","河西区","南开区"], <br>["武汉","宜昌","孝感","襄樊","荆州"], <br>["济南","青岛","烟台","威海","日照"], <br>["石家庄","保定","张家口","廊坊","邯郸"]]; <br>var selpNode = document.getElementById("province"); <br>var selcNode = document.getElementById("city"); <br>var citys = arr[selpNode.selectedIndex]; <br>selcNode.options.length = 0; <br>for(var x=0; x<citys.length; x++) <br>{ <br>var optNode = document.createElement("option"); <br>optNode.innerText = citys[x]; <br>selcNode.appendChild(optNode); <br>} <br>} <br></script>
小结：每次一定记得要将数组清空。
2.邮件列表
思想：1）首先想到整体框架，肯定会想到用表格来进行格式化，然后通过操作表格以及行和单元格这些节点来实现相关功能
2）css主要是对表格相关格式化，其次就是选中以及两行显示不一样的效果,通过动态修改className来实现
由于篇幅的关系，html以及css部分代码相对简单，就不献丑了。
3）JavaScript来实现各种不同功能，代码如下：
Linux+PHP+MySQL案例教程
下载
本书以培养高级网站建设与管理人才为目标，内容循序渐进，由浅入深，通过大量的实例系统全面地介绍了Linux+PHP+MySQL环境下的网络后台开发技术。本书详尽分析了近30个典型案例。包括计数器、网站流量统计、留言板、论坛系统、聊天室、投票与调查、用户管理、新闻发布系统、广告轮播、购物系统等等，力求让读者通过对案例的学习，轻松掌握PHP和MySQL的编程精要，迅速掌握网络后台开发技巧。 本书适
复制代码 代码如下:
<script> <br>var color =""; <br>function getStyle() <br>{ <br>var tableNode =document.getElementsByTagName("table")[0]; <br>var arr = tableNode.rows; <br>for(var x = 0;x<arr.length;x++) <br>{ <br>if(x%2) <br>arr[x].className = "one"; <br>else <br>arr[x].className = "two"; <br>var tdNode0 = arr[x].cells[0]; <br>tdNode0.align = "center"; <br>arr[x].onmouseover = function() <br>{ <br>color = this.className;//将原有的值记录，一遍鼠标走后能回到原来的颜色 <br>this.className = "checked"; <br>} <br>arr[x].onmouseout = function() <br>{ <br>this.className = color; <br>} <br>} <br>} <br>//我们需要全选实现同样的功能，所以我们通过传值来区分是那个节点 <br>function allCheck(index) <br>{ <br>var allNode = document.getElementsByName("all")[index]; <br>var checkNodes = document.getElementsByName("mail"); <br>for(var x=0;x<checkNodes.length;x++) <br>{ <br>checkNodes[x].checked = allNode.checked; <br>} <br>} <br>function checkBut(num) <br>{ <br>var mailNodes = document.getElementsByName("mail"); <br>for(var x=0; x<mailNodes.length; x++) <br>{ <br>if(num>1) <br>mailNodes[x].checked = !(mailNodes[x].checked);//将自己状态反向赋给自己实现反选功能 <br>else <br>mailNodes[x].checked = num; <br>} <br>} <br>function del() <br>{ <br>var b = window.confirm("确定要删除所选邮件吗？"); <br>if(!b) <br>return ; <br>var mailNodes = document.getElementsByName("mail"); <br>var arr = new Array(); <br>var pos = 0; <br>for(var x=0; x<mailNodes.length; x++) <br>{ <br>if(mailNodes[x].checked) <br>{ <br>var trNode = mailNodes[x].parentNode.parentNode; <br>arr[pos++] = trNode; <br>} <br>} <br>for(var x=0; x<arr.length; x++) <br>{ <br>arr[x].parentNode.removeChild(arr[x]); <br>} <br>getStyle(); <br>} <br>window.onload = getStyle; <br></script>
