节点的替换:
1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
2). 该节点除了替换功能以外还有移动的功能.
3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
/**
* 互换 aNode 和 bNode
* @param {Object} aNode
* @param {Object} bNode
*/
function replaceEach(aNode, bNode){
if(aNode == bNode){
return;
}
var aParentNode = aNode.parentNode;
//若 aNode 有父节点
if(aParentNode){
var bParentNode = bNode.parentNode;
//若 bNode 有父节点
if(bParentNode){
var tempNode = aNode.cloneNode(true);
bParentNode.replaceChild(tempNode, bNode);
aParentNode.replaceChild(bNode, aNode);
}
}
}
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Untitled Document</title> 6 7 <script type="text/javascript"> 8 9 //测试 replaceChild 方法 10 window.onload = function(){ 11 12 alert(1); 13 14 var bjNode = document.getElementById("bj"); 15 var rlNode = document.getElementById("rl"); 16 var gameNode = document.getElementById("game"); 17 18 // gameNode.replaceChild(bjNode, rlNode); 19 20 //replaceEach(bjNode, rlNode); 21 22 /* 23 var cityNode = document.getElementById("city"); 24 //cityNode.replaceChild(rlNode, bjNode); 25 26 //实现 bj 节点和 rl 节点的互换. 27 var gameNode = document.getElementById("game"); 28 29 //克隆 bjNode 30 //cloneNode(deep) 若 deep 为true, 则可以克隆子节点 31 var bjNode2 = bjNode.cloneNode(true); 32 gameNode.replaceChild(bjNode2, rlNode); 33 34 alert(2); 35 36 cityNode.replaceChild(rlNode, bjNode);//rlNode为换后新的，bjNode为换前旧的 37 */ 38 replaceEach(bjNode,rlNode);//方法二 定义函数方法，实现互换 39 } 40 41 //方法二。。。。自定义互换两个节点的函数 42 function replaceEach(aNode, bNode){ 43 //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性 44 var aParent = aNode.parentNode; 45 var bParent = bNode.parentNode; 46 47 if(aParent && bParent){ 48 //2. 克隆 aNode 或 bNode 49 var aNode2 = aNode.cloneNode(true); 50 51 //3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild() 52 //方法实现节点的互换 53 bParent.replaceChild(aNode2, bNode); 54 aParent.replaceChild(bNode, aNode); 55 } 56 } 57 58 </script> 59 60 </head> 61 <body> 62 <p>你喜欢哪个城市?</p> 63 <ul id="city"><li id="bj" name="BeiJing">北京</li> 64 <li>上海</li> 65 <li>东京</li> 66 <li>首尔</li> 67 </ul> 68 69 <br><br> 70 <p>你喜欢哪款单机游戏?</p> 71 <ul id="game"> 72 <li id="rl">红警</li> 73 <li>实况</li> 74 <li>极品飞车</li> 75 <li>魔兽</li> 76 </ul> 77 78 <br><br> 79 gender: 80 <input type="radio" name="gender" value="male"/>Male 81 <input type="radio" name="gender" value="female"/>Female 82 83 <br><br> 84 name: <input type="text" name="username" value="atguigu"/> 85 86 </body> 87 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Untitled Document</title> 6 7 <script type="text/javascript"> 8 9 //需求：为所有的li节点 添加onclick响应函数 10 //实现city子节点和game子节点对应位置的元素的互换 11 window.onload=function(){ 12 //互换的方法 13 function replaceEach(aNode, bNode){ 14 //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性 15 var aParent = aNode.parentNode; 16 var bParent = bNode.parentNode; 17 18 if(aParent && bParent){ 19 //2. 克隆 aNode 或 bNode 20 var aNode2 = aNode.cloneNode(true); 21 //交换onclick事件 克隆aNode的同时 也把onclick 复制 22 aNode2.onclick=aNode.onclick; 23 //交换index 属性 克隆aNode的同时 也把index 复制 24 aNode2.index=aNode.index; 25 //3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild() 26 //方法实现节点的互换 27 bParent.replaceChild(aNode2, bNode); 28 aParent.replaceChild(bNode, aNode); 29 //父亲元素.replaceChild(新，旧) 30 } 31 } 32 33 //1.获取所有的li节点 34 var liNodes=document.getElementsByTagName("li"); 35 //2.为每一个li节点添加onclick响应函数 36 for(var i=0;i<liNodes.length;i++){ 37 //手动为每个li节点添加一个index属性 38 liNodes[i].index=i; 39 liNodes[i].onclick=function(){ 40 //3.找到和当前节点对应的那个li节点 41 // alert(this.index); 42 // alert("index："+this.index); 43 var targetIndex=0; 44 if(this.index<4){ 45 targetIndex=4+this.index; 46 }else{ 47 targetIndex=this.index-4; 48 } 49 50 // alert(liNodes[targetIndex].firstChild.nodeValue); 51 //交换index属性 52 var tempIndex=this.index; 53 this.index=liNodes[targetIndex].index; 54 liNodes[targetIndex].index=tempIndex; 55 56 //4.互换 57 replaceEach(this,liNodes[targetIndex]); 58 } 59 60 } 61 } 62 63 </script> 64 65 </head> 66 <body> 67 <p>你喜欢哪个城市?</p> 68 <ul id="city"><li id="bj" name="BeiJing">北京</li> 69 <li>上海</li> 70 <li>东京</li> 71 <li>首尔</li> 72 </ul> 73 74 <br><br> 75 <p>你喜欢哪款单机游戏?</p> 76 <ul id="game"> 77 <li id="rl">红警</li> 78 <li>实况</li> 79 <li>极品飞车</li> 80 <li>魔兽</li> 81 </ul> 82 83 <br><br> 84 gender: 85 <input type="radio" name="gender" value="male"/>Male 86 <input type="radio" name="gender" value="female"/>Female 87 88 <br><br> 89 name: <input type="text" name="username" value="atguigu"/> 90 91 </body> 92 </html>