JavaScript-DOM编程

最新推荐文章于 2023-02-17 11:23:36 发布

玻璃年华Alex

最新推荐文章于 2023-02-17 11:23:36 发布

阅读量617

点赞数

本文链接：https://blog.youkuaiyun.com/bolininahuaalex/article/details/50189299

版权

1. 当整个html文档完全加载成功后触发window.onload事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //1.当整个html文档完全加载成功后触发window.onload事件。
    //事件触发时，执行后面function里面的函数体
	window.onload = function(){
    	//2.获取所有的button节点，并取得第一个元素
		var btn = document.getElementsByTagName("button")[0];
		//3.为button的Onclick事件赋值：当点击button时，执行函数体
    	btn.onclick = function(){
			//4.弹出helloworld
			alert("helloworld");
		}
	}
</script>
</head>
<body>
	<button>ClickMe</button>
</body>
</html>

2.获取指定的元素节点的方法：

1）document.getElementById("bj");

2）document.getElementsByTagName("li");

3）document.getElementsByName("gender");

4）若HTML元素自身没有定义name属性，则getElementsByName方法对于IE无效，所以该方法使用时需谨慎

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		//获取指定的元素节点
		window.onload = function(){
			//1.获取id为bj的那个节点
			//在编写HTML文档时，需确保id属性值是唯一的
			//该方法为document对象的方法
			var bjNode = document.getElementById("bj");
			alert(bjNode);
			//2.获取所有的li节点
			//使用标签名获取指定节点的集合
			//该方法为Node接口的方法，即任何一个节点都有这个方法
			var liNodes = document.getElementsByTagName("li");
			alert(liNodes.length);
			//获取指点节点的指定子节点
			var cityNode = document.getElementById("city");
			var cityLiNodes = cityNode.getElementsByTagName("li");
			alert(cityLiNodes.length);
			
			//3.根据HTML文档元素的name属性名来获取指定的节点的集合
			var genderNodes = document.getElementsByName("gender");
			alert(genderNodes.length);
			
			//若HTML元素自身没有定义name属性，则getElementsByName
			//方法对于IE无效，所以该方法使用时需谨慎
			var objNodes = document.getElementsByName("BeiJing");
			alert(objNodes.length);
			
			
		}
	</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city">
		<li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li>东京</li>
		<li>首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	gender:
	<input type="radio" name="gender" value="male"/>Male
	<input type="radio" name="gender" value="female"/>Female
</body>
</html>

3.读写属性节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		//读写属性节点:通过元素节点.的方式来获取属性值和设置属性值
		window.onload = function(){
			//属性节点即为某一指定的元素节点的属性。
			//1.先获取指定的元素节点
			var nameNode = document.getElementById("name");
			//2.在读取指定属性的值
			alert(nameNode.value);
			//3.设置指定的属性的值
			nameNode.value = "范范";
		}
	</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city">
		<li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li>东京</li>
		<li>首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	name:<input type="text" name="username" id="name" value="fanfan"/>
</body>
</html>

4.获取元素节点的子节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		//获取元素节点的子节点
		window.onload = function(){
			//1.获取#city节点的所有子节点
			var cityNode = document.getElementById("city");
			//2.利用元素节点的childNodes方法可以获取所有指定元素节点的所有子节点
			alert(cityNode.childNodes.length);
			//3.获取#city节点的所有li子节点
			var cityLiNodes = cityNode.getElementsByTagName("li");
			alert("1111:" + cityLiNodes.length);
			//4.获取指定节点的第一个子节点和最后一个子节点
			alert(cityNode.firstChild);
			alert(cityNode.lastChild);
		}
	</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city"><li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li>东京</li>
		<li>首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	name:<input type="text" name="username" id="name" value="fanfan"/>
</body>
</html>

5.获取文本节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		//获取文本节点
		window.onload = function(){
			//文本节点一定是元素节点的子节点
			//1.获取文本节点所在的元素节点
			var bjNode = document.getElementById("bj");
			//2.通过firstChild定位到文本节点
			var bjTextNode = bjNode.firstChild;
			//3.通过操作文本节点的nodeValue属性来读写文本节点的值
			alert(bjTextNode.nodeValue);
			bjTextNode.nodeValue = "扬州";
		}
	</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city"><li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li>东京</li>
		<li>首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	name:<input type="text" name="username" id="name" value="fanfan"/>
</body>
</html>

6.点击每个li节点，都弹出其文本值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		window.onload = function(){
			//点击每个li节点，都弹出其文本值
			//1.获取素有的li节点
			var liNodes = document.getElementsByTagName("li");
			//2.使用for循环进行遍历，得到每一个li节点
			for(var i = 0;i < liNodes.length;i++){
				//3.为每一个li节点添加onclick响应函数
				liNodes[i].onclick = function(){
					//4.在响应函数中获取当前节点的文本节点的文本值
					//5.alert打印
					//this为正在响应事件的那个节点
					alert(this.firstChild.nodeValue);
					//此时i已经是8了，liNodes[8]不指向任何节点
					//alert(liNodes[i].firstChild.nodeValue);
					
				}
				
			}
			
		}
	</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city"><li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li>东京</li>
		<li>首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	name:<input type="text" name="username" id="name" value="fanfan"/>
</body>
</html>

7.点击每个li节点，若li节点的文本值没有^^开头，加上有，则去除

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		window.onload = function(){
			//点击每个li节点，若li节点的文本值没有^^开头，加上
			//有，则去除
			var liNodes = document.getElementsByTagName("li");
			for(var i = 0;i < liNodes.length;i++){
				liNodes[i].onclick = function(){
					var val = this.firstChild.nodeValue;
					
					var reg = /^\^{2}/g;
					if(reg.test(val)){
						val = val.replace(reg, "");
					}else{
						val = "^^" + val;
					}
					this.firstChild.nodeValue = val;
				}
			}
			//1.使用正则表达式判断是否以^^开始
			//2.调用字符串的replace（reg，str）方法除去指定的字符串
			/* var str = "^^abc";
			var reg = /^\^{2}/g;//正则表达式
			alert(reg.test(str));//true
			str = str.replace(reg,"");
			alert(str);
			
			var str2 = "abc";
			alert(reg.test(str2));//false */
		}
	</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city"><li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li>东京</li>
		<li>首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	name:<input type="text" name="username" id="name" value="fanfan"/>
</body>
</html>

8.关于节点的属性，nodeType，nodeName，nodeValue

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		//关于节点的属性，nodeType，nodeName，nodeValue
		//在文档中，任何一个节点的都有着3个属性
		//而id，name，value是具体节点的属性。
		window.onload = function(){
			//1.元素节点的这3个属性
			var bjNode = document.getElementById("bj");
			alert(bjNode.nodeType);//元素节点：1
			alert(bjNode.nodeName);//节点名：li
			alert(bjNode.nodeValue);//元素节点没有nodeValue属性值：null
			//2.属性节点
			var nameAttr = document.getElementById("name")
			                       .getAttributeNode("name");
			alert(nameAttr.nodeType);//属性节点：2
			alert(nameAttr.nodeName);//属性节点的节点名：属性名
			alert(nameAttr.nodeValue);//属性节点的节nodeValue属性值：username
			
			//3.文本节点
			var textNode = bjNode.firstChild;
			alert(textNode.nodeType);//文本节点：3
			alert(textNode.nodeName);//节点名：#text
			alert(textNode.nodeValue);//文本节点的nodeValue属性值：文本值
			
			//nodeType、nodeName是只读的，
			//而nodeValue是可以被改变的
			//以上三个属性，只有在文本节点中使用nodeValue读写文本值时使用最多
		}
	</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city"><li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li>东京</li>
		<li>首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	name:<input type="text" name="username" id="name" value="fanfan"/>
</body>
</html>

9.总结

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		//1、节点分为三种类型，元素节点、属性节点、 文本节点
		//通常情况下，操作属性节点直接通过“元素节点.属性名”的方式来读写属性值
		//而不是获取属性节点
		
		//2.写JS代码的位置。在title节点后面，写在window.onload = function(){}中，
		//可以获取到当前文档的所有节点
		
		//3.如何获取元素节点
		//3.1根据id获取
		//3.2根据标签名获取:该方法并非document对象所独有，任何元素节点
		//都可以调用该方法，以获取指定的子节点。
		//3.3根据name属性获取。若HTML元素没有name属性，我们硬添加了一个name属性，
		//使用getElementsByName,对于IE无法使用
		
		//4.获取子节点
		//4.1childNodes属性,获取指定元素的所有子节点，不大常用
		//4.2firstChild、lastChild属性：获取元素节点的文本节点（如果一个元素节点只有一个文本子节点）
		//4.3使用元素节点的getElementsByTagName（“方法名”）；
		
		//5.读写文本节点
		//5.1文本节点一定是元素节点的子节点
		//5.2步骤：获取文本节点所在的元素节点->利用firstChild获取文本节点
		//->利用nodeValue来读写文本的属性值
		
		//6.节点的属性：所有节点都有的属性(元素节点，属性节点，文本节点)
		//6.1 nodeType:1,2,3（只读）
		//6.2 nodeName:返回对应的节点的名字（只读）
		//6.3 nodeValue：null，属性值，文本值（可读写）
		
		//7.属性节点：
		//7.1 一般情况下不单独获取属性节点，而是通过元素节点.属性名的方式来读写属性值
		window.onload = function(){
			 var bjNode = document.getElementById("bj");
			alert(bjNode);
			
			var liNode = document.getElementsByTagName("li");
			alert(liNode.length);
			
			var genderNode = document.getElementsByName("gender");
			alert(genderNode.length);
			
			var cityNode = document.getElementById("city");
			var cityLiNode = cityNode.getElementsByTagName("li");
			alert(cityLiNode.length);
			
			var lichildNode = cityNode.childNodes;
			alert(lichildNode.length);  //4
			 
			var nameNode = document.getElementsByName("username")[0];
			alert(nameNode.value);
			nameNode.value = "饭饭";
		}
	</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city">
		<li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li>东京</li>
		<li>首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	<br><br>
	gender:
	<input type="radio" name="gender" value="male"/> Male
	<input type="radio" name="gender" value="female"/>Female
	<br><br>
	name:<input type="text" name="username" value="fanfan"/>
</body>
</html>

10.新创建一个元素节点，并把该节点添加为文档中指定节点的子节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		//新创建一个元素节点，并把该节点添加为文档中指定节点的子节点
		window.onload = function(){
			alert(1);
			//1.document.createElement(elementTagName);
			//新创建一个元素节点，返回值为指向元素节点的引用
			var liNode = document.createElement("li");
			
			//2.创建“厦门”的文本节点
			//document.createTextNode("")将创建一个文本节点
			//参数为文本值，返回为该文本节点的引用
			var xmText = document.createTextNode("厦门");
			liNode.appendChild(xmText);
			
			var cityNode = document.getElementById("city");
			//elementNode.appendChild(newChild):为elementNode
			//新添加newChild子节点，作为最有一个子节点
			cityNode.appendChild(liNode);
		}
	</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city">
		<li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li>东京</li>
		<li>首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	<br><br>
	gender:
	<input type="radio" name="gender" value="male"/> Male
	<input type="radio" name="gender" value="female"/>Female
	<br><br>
	name:<input type="text" name="username" value="fanfan"/>
</body>
</html>

11.点击submit按钮时，检查是否选择type，若没有选择给出提示：“请选择类型”;

检查文本框中是否有输入（可以去除前后空格），若没有输入，则给出提示：“请输入内容”

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//需求：点击submit按钮时，检查是否选择type，若没有选择给出提示：“请选择类型”;
	//    检查文本框中是否有输入（可以去除前后空格），若没有输入，则给出提示：“请输入内容”
	//若检查都通过，则在相应的ul节点中添加对应的li节点
	//需求2：使包括新增的li都能响应onclick事件：弹出li的文本值
    window.onload = function(){
		
    	function showContent(liNode){
			alert("~~~~" + liNode.firstChild.nodeValue);
		}
		
		var liNodes = document.getElementsByTagName("li");
		for(var i = 0;i < liNodes.length;i++){
			liNodes[i].onclick = function(){
				showContent(this);
			}
		}
    	//1.获取#submit对应的按钮submitBtn
    	var submit = document.getElementById("submit");
    	//2.为submitBtn添加onclick相应函数
    	submit.onclick = function(){
    		
        	//4.检查类型是否被选中，若没有选择给出提示：“请选择类型”
            //4.1选择所有的name="type"的节点
            var types = document.getElementsByName("type");
            //4.2遍历types，检查其是否有一个type的checked属性存在，就可以说明
            //有一个type被选中了:通过if(元素节点.属性名)来判断某一个元素节点是否有该属性
            var typeVal = null;
            for(var i = 0;i < types.length;i++){
            	if(types[i].checked){
            		typeVal = types[i].value;
            		break;
            	}
            } 
            //4.3若没有任何一个type被选中，则弹出“请选择类型”。响应方法结束：return false
            if(typeVal == null){
            	alert("请选择类型!");
            	return false;
            } 
            //5.获取name=“name”文本值：通过value属性。
            var nameEle = document.getElementsByName("name")[0];
            var nameVal = nameEle.value;
            //6.去除namevalue的前后空格
            var reg = /^\s*|\s*$/g;
            nameVal = nameVal.replace(reg,""); 
            alert("--" + nameVal + "--");
            nameEle.value = nameVal;
            //6.把nameVal和""进行比较，若是""说明只输入了空格，弹出"请输入内容"
            //方法结束：return false
            if(nameVal == ""){
            	alert("请输入内容");
            	return false;
            }
            //7.创建li节点
            var liNode = document.createElement("li");
            //8.利用nameVal创建文本节点
            var content = document.createTextNode(nameVal);
            //9.把8加为7的子节点
            liNode.appendChild(content);
            //11.为新创建的li添加onclick响应函数
            liNode.onclick = function(){
				showContent(this);
			}
            
            //10.把7加为选择的type对应的节点处
            document.getElementById(typeVal)
            		.appendChild(liNode);
            
            //3.在onclick相应函数的结尾处添加return false，就可以取消提交按钮的默认行为
    		return false;
    	}
    	
    }
</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city">
		<li id="bj" >北京</li>
		<li>上海</li>
		<li>东京</li>
		<li>首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	<br><br>
	<form action = "dom-7.html" name="myform">
		<input type="radio" name="type" value="city"/>城市
		<input type="radio" name="type" value="game"/>游戏
		
		name:<input type="text" name="name"/>
		<input type="submit" value="Submit" id="submit"/>
	</form>
</body>
</html>

12.交换节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		
		window.onload = function(){
			//
			var liNodes = document.getElementsByTagName("li");
			for(var i = 0;i < liNodes.length;i++){
				//手动为每个li节点添加一个index属性
				liNodes[i].index = i;
				liNodes[i].onclick = function(){
					//
					alert("onclick");
					var targetIndex = 0;
					if(this.index < 4){
						targetIndex = 4 + this.index;
					}else{
						targetIndex = this.index - 4;
					}
					//
					var tempIndex = this.index;
					this.index = liNodes[targetIndex].index;
					liNodes[targetIndex].index = tempIndex;
					//alert(liNodes[targetIndex].firstChild.nodeValue);
					replaceEach(this, liNodes[targetIndex]);
				}
			}
			
			//自定义互换两个节点的函数
			function replaceEach(aNode, bNode){
				//1.获取aNode，bNode的父节点，使用parentNode属性
				var aParent = aNode.parentNode;
				var bParent = bNode.parentNode;
				//2.克隆aNode或bNode
				if(aParent && bParent){
					var aNode2 = aNode.cloneNode(true);
			        //克隆aNode的同时，把onclick事件也复制
			        aNode2.onclick = aNode.onclick;
			        //index属性
			        aNode2.index = aNode.index;
				}
				//3.分别调用aNode的父节点和bNode的父节点的replaceNode
				//实现互换
				bParent.replaceChild(aNode2,bNode);
				//alert(00);
				aParent.replaceChild(bNode,aNode)
			}
		}
		
		
	</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city">
		<li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li>东京</li>
		<li>首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	<br><br>
	gender:
	<input type="radio" name="gender" value="male"/> Male
	<input type="radio" name="gender" value="female"/>Female
	<br><br>
	name:<input type="text" name="username" value="fanfan"/>
</body>
</html>

13.删除节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		//删除节点
		window.onload = function(){
			/* alert("1");
			var bjNode = document.getElementById("bj");
			bjNode.parentNode.removeChild(bjNode); */
			//为每一个li节点添加一个confirm,若确定，则删除
			var liNodes = document.getElementsByTagName("li");
			for(var i = 0;i < liNodes.length;i++){
				liNodes[i].onclick = function(){
					var flag = confirm("确定要删除"+this.firstChild.nodeValue+"么？");
					if(flag){
						this.parentNode.removeChild(this);
					}
				}
			}
		}
	</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city">
		<li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li>东京</li>
		<li>首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	<br><br>
	gender:
	<input type="radio" name="gender" value="male"/> Male
	<input type="radio" name="gender" value="female"/>Female
	<br><br>
	name:<input type="text" name="username" value="fanfan"/>
</body>
</html>

14.级联选择

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload = function(){
		//1.为#province添加onchange相应函数
		document.getElementById("province").onchange = function(){
			
			//1.1把#city节点除第一个子节点外都移除
			var cityNode = document.getElementById("city");
			var cityNodeOptions = cityNode.getElementsByTagName("option");
			var len = cityNodeOptions.length;
			for(var i = 1;i < len;i++){
				cityNode.removeChild(cityNodeOptions[1]);
			}
			var provinceVal = this.value;
			if(provinceVal == ""){
				return;
			}
			//2.cities加载xml文件,得到代表该文档的document对象
			var xmlDoc = parseXml("cities.xml");
			//3.在cities.xml文档中查找和选择的省匹配的province
			//var provinces = xmlDoc.getElementsByTagName("province");
			//alert(provinces.length);
			var provinceEle = xmlDoc.selectNodes("//province[@name='"+provinceVal+"']");
			//alert(provinceVal);
			//4.再得到province节点的所有的city子节点
			var cityNodes = provinceEle[0].getElementsByTagName("city");
			//alert(cityNodes.length);
			//5.遍历cities子节点，得到每一个city子节点的文本值
			for(var i = 0;i < cityNodes.length;i++){
			//6.利用得到的文本值创建option节点
			//<option>cityName</option>
				var cityText = cityNodes[i].firstChild.nodeValue;
				var cityTextNode = document.createTextNode(cityText);
				
				var optionNode = document.createElement("option");
				optionNode.appendChild(cityTextNode);
			//7.并把6创建的option子节点添加为#city的子节点
			cityNode.appendChild(optionNode);
				
			}
			
			
			
			
		}
		
	}
	//js解析xml文档的函数，只支持ie
	function parseXml(fileName){
		//IE内核的浏览器
		if(window.ActiveXObject){
			//创建DOM解析器
			var doc = new ActiveXObject("Microsoft.XMLDOM");
			doc.async = "false";
			//加载XML文档，获取XML文档对象
			doc.load(fileName);
			return doc;
		}
	}
</script>
</head>
<body>
	<select id="province">
		<option value="">-请选择-</option>
		<option value="河北省">河北省</option>
		<option value="辽宁省">辽宁省</option>
		<option value="山东省">山东省</option>
	</select>
	<select id="city"><option value="...">-请选择-</option></select>
</body>
</html>

cities.xml

<?xml version="1.0" encoding="UTF-8"?>
<china>
	<province name="河北省">
		<city>石家庄</city>
		<city>邯郸</city>
		<city>唐山</city>
		<city>张家口</city>
		<city>廊坊</city>
		<city>保定</city>
		<city>承德</city>
	</province>
	
	<province name="辽宁省">
		<city>沈阳</city>
		<city>大连</city>
		<city>鞍山</city>
		<city>抚顺</city>
		<city>铁岭</city>
	</province>
	
	<province name="山东省">
		<city>济南</city>
		<city>青岛</city>
		<city>威海</city>
		<city>烟台</city>
		<city>廊坊</city>
	</province>
</china>

15.checkbox全选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
	//需求：若checkedALL_2被选中，则name=items的checkbox都被选中
	//若没有，则name=items的checkbox都取消选中
	//若name=items的checkbox都选中，则checkedALL_2选中
	//若name=items的checkbox有任何一个没有被选中，则checkedALL_2不选中
	
	//提示：事件加给checkedALL_2，判断是否被选中，
	//若被选中，获取name=items的checkbox,都选中
	//若没有选中，获取name=items的checkbox,取消选中
	//根据是否存在checked属性来判断是否选中，可以使其checked属性=true被选中
	//checked属性=false取消选中
	//还需要给每个name=items的checkbox添加相应函数
	//判断name=items的checkbox是否都被选中
	//选中的个数若等于总个数，则都被选择，那么使checkedALL_2被选中
	window.onload = function(){
		document.getElementById("checkedALL_2").onclick = function(){
			var flag = this.checked;
			var items = document.getElementsByName("items");
			for(var i = 0;i < items.length;i++){
				items[i].checked = flag;
			}
		}
		var items = document.getElementsByName("items");
		for(var i = 0;i < items.length;i++){
			items[i].onclick = function(){
				//记录被选中的items个数
				var number = 0;
				for(var j = 0;j < items.length;j++){
					if(items[j].checked){
						number++;
					}	
				}
				document.getElementById("checkedALL_2").checked=
					(items.length == number);
			}
		}
		
		document.getElementById("CheckedAll").οnclick=function(){
			for(var j = 0;j < items.length;j++){
				items[j].checked = true;
			}
		}
		
		document.getElementById("CheckedNo").οnclick=function(){
			for(var j = 0;j < items.length;j++){
				items[j].checked = false;
			}
		}
		
		document.getElementById("CheckedRev").οnclick=function(){
			for(var j = 0;j < items.length;j++){
				items[j].checked = !items[j].checked;
			}
		}
		
		document.getElementById("Send").οnclick=function(){
			for(var j = 0;j < items.length;j++){
				//var str = null;
				if(items[j].checked){
					alert(items[j].value);
				}
			}
		}
	}
</script>
</head>
<body>
	<form method="post" action="">
		你爱好的运动是？
		<input type="checkbox" id="checkedALL_2"/>全选/全不选
		<br/>
		<input type="checkbox" name="items" value="足球">足球
		<input type="checkbox" name="items" value="篮球">篮球
		<input type="checkbox" name="items" value="羽毛球">羽毛球
		<input type="checkbox" name="items" value="乒乓球">乒乓球
		<br/>
		<input type="button" id="CheckedAll" value="全选"/>
		<input type="button" id="CheckedNo" value="全不选"/>
		<input type="button" id="CheckedRev" value="反选"/>
		<input type="button" id="Send" value="提交"/>
	</form>
</body>
</html>

16.employeetable的所有的a节点添加Onclick响应函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

/*
 * 为#employeetable的所有的a节点添加Onclick响应函数
 * 1.弹出confirm：确定要删除xx的信息吗？
 * 2.若点击确定，则删除a节点所在的行
 * 注意：
 * 1.a节点是一个超级链接，可以在其onclick事件中通过返回false来取消默认行为
 * 2.tr的直接父节点为tbody，而不是table
 * 3.可以把去除前后空格的代码写成一个trim(str)函数
 */
 window.onload = function(){
	var aNodes = document.getElementById("employeetable")
					     .getElementByTagName("a");
	for(var i = 0;i < aNodes.length;i++){
		aNodes[i].onclick = function(){
			var trNode = this.parentNode.parentNode;
			var textContent = trNode.getElementsByTagName("td")[0].
							  firstChild.nodeValue;
			textContent = trim(textContent);
			
			if(confirm("确定要删除"+this.first+"的信息吗"));
			
			return false;
		}
	}
	function trim(str){
		var reg = /^\s*|\s*$/g;
		return str.replace(reg, "");
	}
}
</script>
</head>
<body>
	<center>
		
	</center>
</body>
</html>

17.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		//插入节点insertBefore()
		window.onload = function(){
			//1.#把#rl插入到#bj节点的前面
			//该方法除了进行插入外，还有移动节点的功能。
			alert("111");
			var cityNode = document.getElementById("city");
			var bjNode = document.getElementById("bj");
			var rlNode = document.getElementById("rl");
			//cityNode.insertBefore(rlNode,bjNode);
			
			var refNode = document.getElementById("dj");
			insertAfter(rlNode, refNode);
		}
		//把newNode插入到refNode的后面
		function insertAfter(newNode, refNode){
			//1.测试refNode是否为其父节点的最有一个子节点
			var parentNode = refNode.parentNode;
			if(parentNode){
				var lastNode = parentNode.lastChild;
				if(refNode == lastNode){
					//2.若是，直接把newNode插入为refNode父节点最后一个子节点
					parentNode.appendChild(newNode);
				}else{
					//3.若不是，则获取refNode的下一个兄弟节点，插入
					var nextNode = refNode.nextSibling;
					parentNode.insertBefore(newNode,nextNode);
				}
			}	
		}
	</script>
</head>
<body>
	<p>你喜欢哪个城市</p>
	<ul id="city">
		<li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li id = "dj">东京</li>
		<li id = "se">首尔</li>
	</ul>
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>
	<br><br>
	gender:
	<input type="radio" name="gender" value="male"/> Male
	<input type="radio" name="gender" value="female"/>Female
	<br><br>
	name:<input type="text" name="username" value="fanfan"/>
</body>
</html>