替換節點
阿新 • • 發佈：2017-07-15
屬性 else image var tel 遊戲 手動 targe fun
1.單點替換程序
這種效果可以看出，雖然被替換了，但是下面節點也沒移動了。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var bjNode=document.getElementById("bj"); 9 var rlNode=document.getElementById("rl"); 10 var cityNode=document.getElementById("city"); 11 alert(1); 12 cityNode.replaceChild(rlNode,bjNode); 13 } 14 </script> 15 </head> 16 <body> 17 <p>你喜歡哪個城市?</p> 18 <ul id="city">19 <li id="bj" name="BeiJing">北京</li> 20 <li>上海</li> 21 <li>東京</li> 22 <li>首爾</li> 23 </ul><br><br> 24 25 <p>你喜歡哪款單機遊戲?</p> 26 <ul id="game"> 27 <li id="rl">紅警</li> 28 <li>實況</li> 29 <li>極品飛車</li> 30 <li>魔獸</li> 31 </ul><br><br> 32 </body> 33 </html>
2.運行效果
3.節點互換
這種方式需要函數cloneNode（true）
4.程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var bjNode=document.getElementById("bj"); 9 var rlNode=document.getElementById("rl"); 10 var cityNode=document.getElementById("city"); 11 var gameNode=document.getElementById("game"); 12 alert(1); 13 var bjNode2=bjNode.cloneNode(true); 14 //順序不許弄反 15 gameNode.replaceChild(bjNode2,rlNode); 16 cityNode.replaceChild(rlNode,bjNode); 17 18 } 19 </script> 20 </head> 21 <body> 22 <p>你喜歡哪個城市?</p> 23 <ul id="city"> 24 <li id="bj" name="BeiJing">北京</li> 25 <li>上海</li> 26 <li>東京</li> 27 <li>首爾</li> 28 </ul><br><br> 29 30 <p>你喜歡哪款單機遊戲?</p> 31 <ul id="game"> 32 <li id="rl">紅警</li> 33 <li>實況</li> 34 <li>極品飛車</li> 35 <li>魔獸</li> 36 </ul><br><br> 37 </body> 38 </html>
5.運行結果
6.自定義互換函數
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload=function(){ var bjNode=document.getElementById("bj"); var rlNode=document.getElementById("rl"); var cityNode=document.getElementById("city"); var gameNode=document.getElementById("game"); alert(1); replaceEach(bjNode,rlNode); } //自定義互換兩個節點的函數 function replaceEach(aNode, bNode){ //1. 獲取 aNode 和 bNode 的父節點. 使用 parentNode 屬性 var aParent = aNode.parentNode; var bParent = bNode.parentNode; if(aParent && bParent){ //2. 克隆 aNode 或 bNode var aNode2 = aNode.cloneNode(true); //3. 分別調用 aNode 的父節點和 bNode 的父節點的 replaceChild() //方法實現節點的互換 bParent.replaceChild(aNode2, bNode); 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> </body> </html>
7.效果
8.對應節點的互換，並且可以多次互換
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var liNodes = document.getElementsByTagName("li"); 9 //2. 為每一個 li 節點添加 Onclick 響應函數 10 for(var i = 0; i < liNodes.length; i++){ 11 //手動為每個 li 節點添加一個 index 屬性 12 liNodes[i].index = i; 13 liNodes[i].onclick = function(){ 14 //3. 找到和當前節點對應的那個 li 節點 15 var targetIndex = 0; 16 if(this.index < 4){ 17 targetIndex = 4 + this.index; 18 }else{ 19 targetIndex = this.index - 4; 20 } 21 //交換 index 屬性，這個是重點，每次替換時也將index一起互換 22 var tempIndex = this.index; 23 this.index = liNodes[targetIndex].index; 24 liNodes[targetIndex].index = tempIndex; 25 26 //4. 互換. 27 replaceEach(this, liNodes[targetIndex]); 28 } 29 } 30 31 } 32 //自定義互換兩個節點的函數 33 function replaceEach(aNode, bNode){ 34 //1. 獲取 aNode 和 bNode 的父節點. 使用 parentNode 屬性 35 var aParent = aNode.parentNode; 36 var bParent = bNode.parentNode; 37 38 if(aParent && bParent){ 39 //2. 克隆 aNode 或 bNode 40 var aNode2 = aNode.cloneNode(true); 41 42 //3. 分別調用 aNode 的父節點和 bNode 的父節點的 replaceChild() 43 //方法實現節點的互換 44 bParent.replaceChild(aNode2, bNode); 45 aParent.replaceChild(bNode, aNode); 46 } 47 } 48 </script> 49 </head> 50 <body> 51 <p>你喜歡哪個城市?</p> 52 <ul id="city"> 53 <li id="bj" name="BeiJing">北京</li> 54 <li>上海</li> 55 <li>東京</li> 56 <li>首爾</li> 57 </ul><br><br> 58 59 <p>你喜歡哪款單機遊戲?</p> 60 <ul id="game"> 61 <li id="rl">紅警</li> 62 <li>實況</li> 63 <li>極品飛車</li> 64 <li>魔獸</li> 65 </ul><br><br> 66 </body> 67 </html>
9.運行結果
替換節點