传智播客学习之DOM编程实例

 

 最近一直在努力学习DOM编程这块，这是目前成就感最强烈的一块了，毕老师很认真的给我们讲解了相关知识，并在网上找了很多做的非常棒的网页作为例程给我们进行讲解，并给我们讲解了很多关于如何去学习DOM的方法，觉得真的是受益匪浅啊，下面就几个我觉得比较好的例子和大家分享一下。

1.二级连动下拉菜单（一级是省份，二级是城市，要求一级选中省份，二级城市对应出现）

步骤：1）基本框架（HTML）：两个复选框，而第二个复选框里面开始应该是没有选项的，注意第一个下拉框会作为事件源，通过 onchange方法激发JavaScript中的功能实现部分。

<xmp>

<select id="province" οnchange="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>