2009-12-24传智播客——JavaScriptDOM加强（一）转载）

今天学习JavaScriptDOM加强，javascript灵活性大家都知道。但我们学习的只是使用JavaScript

这个是重点，一定要牢记，首先知道了DOM，DOM下面就是这些。把框架记住了，使用JavaScriptDOM那就容易了。

整体上内容就这么多，不过今天还有三个练习。上边的内容看起来简单，但实际应用中并没那么容易。这也许就是JavaScript吧！——看着简单，用起来十分难！

window.onload = function(){

??? var province = document.getElementById("province");

???

??? // 设置<select id="province">的被改变事件

??? province.onchange = function(){

?????? //----- 每次选择省份时，要清空<select id="province">下的原有城市 -----

?????? var selectCity = document.getElementById("city");

?????? var oldcities = selectCity.childNodes;

?????? // 要保留“请选择...”，所以从1开始

?????? var len = oldcities.length-1;

?????? for(var i=1; i<len;i++){

?????????? selectCity.removeChild(selectCity.lastChild);

?????? }??

??????

?????? //----- 获取城市并显示 ------

?????? // 获取当前省份

?????? var province = this.value;

?????? if(province != ""){

?????????? // 加载XML文件

?????????? var cityDoc = parseXml("cities.xml");

?????????? // 查找指定省份节点????????

?????????? var provinces = cityDoc.getElementsByTagName("province");

?????????? var provinceNode = null;

?????????? for(var i=0; i < provinces.length; i++){

????????????? if(provinces[i].getAttribute("name") == province){

????????????????? provinceNode = provinces[i];

????????????????? break;

????????????? }

?????????? }

?????????? // 获取对应省份的所有城市

?????????? var cities = provinceNode.childNodes;

?????????? // 包装城市，插入到<select id="city">中

?????????? for(var i=0; i<cities.length;i++){

????????????? if (cities[i].hasChildNodes()) {

????????????????? // 创建option元素节点

????????????????? var optionNode = document.createElement("option");

????????????????? // 创建文本节点

????????????????? var textNode = document.createTextNode(cities[i].firstChild.nodeValue);

????????????????? // 将文本节点添加到option元素节点

????????????????? optionNode.appendChild(textNode);

????????????????? // 将option元素节点添加到select元素节点中

????????????????? selectCity.appendChild(optionNode);

????????????? }

?????????? }

?????? }?????

??? }

window.onload = function(){

//------------ 添加联系人 ---------------??

??? //获取提交按钮

??? var sbumitform = document.getElementById("submit");

??? //设置提交事件

???

??? sbumitform.onclick = function(){

?????? // 获取提交的联系人信息

?????? var name = document.getElementById("name").value;

?????? var phone = document.getElementById("phone").value;

?????? var address = document.getElementById("address").value;

?????? // 人名不能为空，如果空则返回并提示。使用正则表达式替换。

?????? var reg = /^\s*|\s*$/gi;

?????? name = name.replace(reg, "");

?????? if(name == ""){

?????????? alert("请输入姓名！");

?????????? return false;

?????? }

?????? //创建表格中的<tr>节点

?????? var trNode = document.createElement("tr");

?????? //创建表格中的<td>节点，并将信息添加进去

?????? var tdNameNode = document.createElement("td");

?????? tdNameNode.appendChild(document.createTextNode(name));

?????? var tdPhoneNode = document.createElement("td");

?????? tdPhoneNode.appendChild(document.createTextNode(phone));

?????? var tdAddressNode = document.createElement("td");

?????? tdAddressNode.appendChild(document.createTextNode(address));

?????? var tdDeleteNode = document.createElement("td");

?????? var aNode = document.createElement("a");

?????? aNode.setAttribute("href","/delete?id=");

?????? aNode.appendChild(document.createTextNode("delete"));

?????? tdDeleteNode.appendChild(aNode);

?????? //将td添加到tr中

?????? trNode.appendChild(tdNameNode);

?????? trNode.appendChild(tdPhoneNode);

?????? trNode.appendChild(tdAddressNode);

??????

?????? //将tr添加到table中

?????? document.getElementById("contacters").appendChild(trNode);

?????? return false;

??? }

???

//------------ 删除系人 ---------------

??? // 获取所有font-size: 10pt; background: white; color: green;