(8)JavaScript DOM节点的替换

节点的替换：

replaceChild（）：把一个给定父元素里的一个子节点替换成另外一个子节点 var reference = element.replaceChild（newChild，oldChild）；
该节点除了替换功能以外还有移动的功能
该方法只能完成单向替换，若需要使用双向替换，需要自定义函数

节点的替换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	  
	  
	 //测试replaceChild方法
	  window.onload = function()
	  {
	  	 alert(1);
			var bjNode = document.getElementById("bj");
			var rlNode = document.getElementById("rl");
			replaceEach(bjNode,rlNode);		
	  }
	  //自定义函数  互换节点的函数
	  function replaceEach (aNode,bNode) {
	 	//首先克隆一个aNode节点
	 	var tempA = aNode.cloneNode(true);
	 	//获取父亲节点
	 	var apar = aNode.parentNode;
	 	var bpar = bNode.parentNode;
	 	
	 	//替换
	 	bpar.replaceChild(tempA,bNode);
	 	apar.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
		
	name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>

结果
在这里插入图片描述

题目
1.需求: 为所有的li节点添加onclick 响应函数
2.实现city子节点和game子节点对应位置的元素的互换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	  
	  			//自定义  替换函数
	  			//但是存在一个问题  就是我们点击的时候 能换过去  但是不能换回来  
	  			//所以交换的是节点   但是也要交换onclick事件   交换属性
	  			function replaceEach (aNode,bNode) {
	 			//首先克隆一个aNode节点
	 			var tempA = aNode.cloneNode(true);
	 			//获取父亲节点
	 			var apar = aNode.parentNode;
	 			var bpar = bNode.parentNode;
	 			//克隆aNode 的同时  把onclick事件也复制。
	 			tempA.onclick = aNode.onclick;
	 			
	 			//克隆aNode 的同时  把onclick事件也复制。
	 			tempA.index = aNode.index;
	 			//替换
	 			bpar.replaceChild(tempA,bNode);
	 			apar.replaceChild(bNode,aNode);
				}
	  			
	 //需求:	为所有的li节点添加onclick	响应函数
	 //实现city子节点和game子节点对应位置的元素的互换
	  window.onload = function()
	  {
	  	//1.	获取所有的li节点
	  	var liNodes = document.getElementsByTagName("li");
	  	//2.	为每一个li节点添加onclick 响应函数
	  	for(var i = 0; i < liNodes.length; i++){
	  		//手动为每个li节点添加一个index属性
	  		liNodes[i].index = i;
	  		liNodes[i].onclick = function () {
	  			//3.	找到和当前节点对应的那个li节点
	  			var targetIndex = 0;
	  			
	  			if(this.index < 4){
	  				targetIndex = 4 + this.index;
	  			}else{
	  				targetIndex = this.index - 4;
	  			}
	  			//获取到相对应的那个节点
	  			var tarNode = liNodes[targetIndex];
	  			
	  			//交换index属性
	  			var tempIndex = this.index;
	  			this.index = tarNode.index;
	  			tarNode.index = tempIndex;
	  			//4.	互换.
				replaceEach(this,tarNode);
	  		}
	  	}
	  }
	</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
		
	name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>

(8)JavaScript DOM节点的替换

猜你喜欢