javascript DOM(四)----節點替換

最後更新：2013-12-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

節點的替換:
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”

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

javascript DOM(四)----節點替換

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support