节点的替换:
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);
}
}

}

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <title>Untitled Document</title>

         <script type="text/javascript">

             //测试 replaceChild 方法

             window.onload = function(){

                 alert(1);

                 var bjNode = document.getElementById("bj");

                 var rlNode = document.getElementById("rl");

                 var gameNode = document.getElementById("game");

 //                gameNode.replaceChild(bjNode, rlNode);

                 //replaceEach(bjNode, rlNode);

                 /*

                 var cityNode = document.getElementById("city");

                 //cityNode.replaceChild(rlNode, bjNode);

                 //实现 bj 节点和 rl 节点的互换.

                 var gameNode = document.getElementById("game");

                 //克隆 bjNode

                 //cloneNode(deep) 若 deep 为true, 则可以克隆子节点

                 var bjNode2 = bjNode.cloneNode(true);

                 gameNode.replaceChild(bjNode2, rlNode);

                 alert(2);

                 cityNode.replaceChild(rlNode, bjNode);//rlNode为换后新的，bjNode为换前旧的

                 */

                 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>

         gender:

             <input type="radio" name="gender" value="male"/>Male

             <input type="radio" name="gender" value="female"/>Female

         <br><br>

         name: <input type="text" name="username" value="atguigu"/>

     </body>

 </html>    
 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <title>Untitled Document</title>

         <script type="text/javascript">

             //需求：为所有的li节点 添加onclick响应函数

             //实现city子节点和game子节点对应位置的元素的互换

             window.onload=function(){

                 //互换的方法

                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);

                      //交换onclick事件 克隆aNode的同时 也把onclick 复制

                         aNode2.onclick=aNode.onclick;

                      //交换index 属性 克隆aNode的同时 也把index 复制

                         aNode2.index=aNode.index;

                      //3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()

                      //方法实现节点的互换

                      bParent.replaceChild(aNode2, bNode);

                      aParent.replaceChild(bNode, aNode);

                      //父亲元素.replaceChild(新，旧)

                  }

                }

                 //1.获取所有的li节点

                 var liNodes=document.getElementsByTagName("li");

                 //2.为每一个li节点添加onclick响应函数

                 for(var i=0;i<liNodes.length;i++){

                     //手动为每个li节点添加一个index属性

                     liNodes[i].index=i;

                     liNodes[i].onclick=function(){

                          //3.找到和当前节点对应的那个li节点

 //                        alert(this.index);

 //                        alert("index："+this.index);

                         var targetIndex=0;

                         if(this.index<4){

                             targetIndex=4+this.index;

                         }else{

                             targetIndex=this.index-4;

                         }

 //                        alert(liNodes[targetIndex].firstChild.nodeValue);

                         //交换index属性

                         var tempIndex=this.index;

                         this.index=liNodes[targetIndex].index;

                         liNodes[targetIndex].index=tempIndex;

                             //4.互换

                    replaceEach(this,liNodes[targetIndex]);

                     }

                 }

             }

         </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>

         gender:

             <input type="radio" name="gender" value="male"/>Male

             <input type="radio" name="gender" value="female"/>Female

         <br><br>

         name: <input type="text" name="username" value="atguigu"/>

     </body>

 </html>

JavaScript的DOM编程--09--节点的替换的更多相关文章

  1. javascript之DOM编程设置节点插入节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  3. JavaScript的DOM编程--02--获取元素节点

    如何来获取元素节点: 1) .document.getElementById: 根据 id 属性获取对应的单个节点 2) .document.getElementsByTagName: 根据标签名获取 ...

  4. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  5. javascript之DOM（一节点类型Node）

    DOM(Document Object Model)是针对HTML和XML文档的一个API.DOM描述的是一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.起源于DHML,现为W3C的推 ...

  6. 高性能JavaScript之DOM编程

    我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...

  7. JavaScript的DOM编程--11--插入节点

    插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...

  8. JavaScript的DOM编程--10--删除节点

    1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...

  9. JavaScript的DOM编程--05--获取文本节点

    获取文本节点: 1). 步骤: 元素节点 --> 获取元素节点的子节点 2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name=" ...

随机推荐

  1. 算法（Python）

    算法就是为了解决某一个问题而采取的具体有效的操作步骤 算法的复杂度,表示代码的运行效率,用一个大写的O加括号来表示,比如O(1),O(n) 认为算法的复杂度是渐进的,即对于一个大小为n的输入,如果他的 ...

  2. KMP算法求next数组

    next数组的求解方法是:第一位的next值为0,第二位的next值为1.后面求解每一位的next值时,根据前一位进行比较.首先将前一位与其next值对应的内容进行比较,如果相等,则该位的next值就 ...

  3. 如何设置html中img宽高相同-css

    最近项目中有一个问题,做一个响应式的盒子,随着屏幕的变化, 宽高一直保持相等,之前一直使用js动态设置,获取盒子的宽度来设置盒子高度. 但是加载时样式显示不是很好,后来直接用css实现. html部分 ...

  4. java傻瓜简单100%一定看的懂新手安装教程

    1.java官网   最新的不是很稳定 http://www.oracle.com/technetwork/java/javase/downloads/index.html 一直点下一步就可以,但别忘 ...

  5. 来腾讯云开发者实验室 学习.NET Core 2.0

    腾讯云开发者实验室为开发者提供了一个零门槛的在线实验平台,开发者实验室提供的能力: 零门槛扫码即可免费领取实验机器,支持使用自有机器参与,实验完成后支持保留实验成果: 在线 WEB IDE 支持 sh ...

  6. 网络相关系列之三：通过GET和POST方法发送数据

    写在最前面:年少的安逸舒适在随着年龄的到来和现实生活的压迫总有一天会全数归还(事实上就是<无间道>中那句:"出来混,迟早要还的!") so fighting. 一.GE ...

  7. 经常使用的C#代码（每日更新）

    欢迎使用该软件,软件中包括了经常使用的代码.而且每日更新. 该软件还在开发中,O(∩_∩)O~ 目的: 1.提高工作效率 2.格式化代码,方便阅读 3.必备工具 4.偷懒专用 watermark/2/ ...

  8. Activiti 基本操作之“受理人变量”

    在 Activiti 流程引擎中,尽管通过 setAssignee(taskId, userId) 可以设置受理人,但这毕竟要先把下一步的任务查出来才能设置,比较繁琐:借助 Activiti 的 ac ...

  9. java集合框架(Collections Framework)

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  10. mongodb 3.4 集群搭建：分片+副本集

    mongodb是最常用的nodql数据库,在数据库排名中已经上升到了前六.这篇文章介绍如何搭建高可用的mongodb(分片+副本)集群. 在搭建集群之前,需要首先了解几个概念:路由,分片.副本集.配置 ...