并給我們講解了很多關于如何去學習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";
