007 替换节点

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.运行结果