DOM操作综合实例

- 综合实例(点击注册，下面表格增加一行)

window.onload = function(){

document.getElementById("addUser").onclick = function(){

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

var emailValue = document.getElementById("email").value;

var telValue = document.getElementById("tel").value;

//<td>Tom</td>

var nameTdElement=document.createElement("td");

var nameTextElement= document.createTextNode(nameValue);

nameTdElement.appendChild(nameTextElement);

}

}

- 二级联动列表实例

window.onload = function(){

//每次列表变化都调用

document.getElementById("province").onchange=function(){

//获取变化的省份的value值

var changeProvinceValue = this.value;

//清空城市的下拉选

var cityElement = document.getElementById("city");

var cityoptionElements = cityElement.getElementsByTagName("option");

//从后往前删除

for (var i=cityoptionElements.length-1;i>0;i-- )

{

cityElement.removeChild(cityoptionElements[i]);

}

//加载xml

var xmlDoc = parseXML("cities.xml");

//拿到所有省的节点

var xmlProvinceElements = xmlDoc.getElementByTagName("province");

var provinceElement = null;

for (var i=0;i<xmlProvinceElements.length ;i++ )

{

var xmlProvinceElement = xmlProvinceElements[i];

var changeProvinceValue = xmlProvinceElement.getAttribute("name");

if (changeProvinceValue == changeProvinceValue){

//把符合条件的省的元素保存到外部

provinceElement = xmlProvinceElement;

break;

}

}

if (provinceElement!=null){

//获取省下所有的city节点

var xmlCityElements = provinceElement.getElementsByTagName("city");

for (var i=0;i<xmlCityElements ;i++ )

{

var cityValue = xmlCityElements[i].firstChild.nodeValue;

//创建option节点

var optionElement = document.createElement("option");

//增加value属性

optionElement.setAttribute("value",cityValue);

//文本节点

var cityTextElement=document.createTextNode(cityValue);

//把文本节点加到option元素里去

optionElement.appendChild(cityTextElement);

//把option节点加到select里去

var cityElement = document.getElementById("city");

cityElement.appendChild(optionElement);

}

}

}

}

思路：拿到xml对象后，拿里面所有的province节点，遍历拿省的name属性，判断...