javascript DOM(四)—-節點替換

節點的替換:
 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); 
   }
  }
 
 }  
Html代碼 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <title>Untitled Document</title> 
        <script type="text/javascript"> 
             
            window.onload = function(){ 
                //1. 把 "東京" 節點替換為 "平壤" 
                var pr = document.createElement("li"); 
                pr.appendChild(document.createTextNode("平壤")); 
                 
                document.getElementById("city").replaceChild(pr, document.getElementById("dj")); 
                 
                //2. 實現 #bj 和 #rl 之間的互換, 需要使用 cloneNode() 方法 
                var bj = document.getElementById("bj"); 
                var rl = document.getElementById("rl"); 
//               
//              var city = document.getElementById("city"); 
//              var game = document.getElementById("game"); 
//               
//              city.replaceChild(rl.cloneNode(true), bj); 
//              game.replaceChild(bj, rl); 
                replaceEach(rl, bj); 
            }; 
             
            /** 
             * 互換節點 
             * @param {Object} aNode 
             * @param {Object} bNode 
             */ 
            function replaceEach(aNode, bNode){ 
                var aParentNode = aNode.parentNode; 
                var bParentNode = bNode.parentNode; 
                 
                //若 aNode 和 bNode 都存在父節點 
                if(aParentNode && bParentNode){ 
                    aParentNode.replaceChild(bNode.cloneNode(true), aNode); 
                    bParentNode.replaceChild(aNode, bNode); 
                } 
            } 
                         
        </script> 
         
    </head> 
    <body> 
        <p>你喜歡哪個城市?</p> 
        <ul id="city"> 
            <li id="bj" name="BeiJing">北京</li> 
            <li>上海</li> 
            <li id="dj">東京</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 
    </body> 
</html>    

 

本文出自“change”

You May Also Like