JavaScript的DOM编程--09--节点的替换
节点的替换:
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--节点的替换的更多相关文章
- javascript之DOM编程设置节点插入节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML、css、javascript、DOM编程
HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...
- JavaScript的DOM编程--02--获取元素节点
如何来获取元素节点: 1) .document.getElementById: 根据 id 属性获取对应的单个节点 2) .document.getElementsByTagName: 根据标签名获取 ...
- 高性能Javascript(2) DOM编程
第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...
- javascript之DOM（一节点类型Node）
DOM(Document Object Model)是针对HTML和XML文档的一个API.DOM描述的是一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.起源于DHML,现为W3C的推 ...
- 高性能JavaScript之DOM编程
我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...
- JavaScript的DOM编程--11--插入节点
插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...
- JavaScript的DOM编程--10--删除节点
1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...
- JavaScript的DOM编程--05--获取文本节点
获取文本节点: 1). 步骤: 元素节点 --> 获取元素节点的子节点 2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name=" ...
随机推荐
- PHP魔术方法和魔术变量总结
从php5以后的版本,类就可以使用魔术方法了.PHP规定以两个下划线开头的方法都保留为魔术方法,所以建议大家函数名最好不用__开 头,除非是为了重载已有的魔术方法. 目前php已有的魔术方法有 __c ...
- 摘要算法---hashlib模块下MD5和SHA的使用
作用: 任意长度的字符串内容通过摘要算法都可以生成唯一序列摘要值,通过摘要算法,可以校验某个文档或者某组字符串是否被修改. 应用: 1.文件内容一致性校验 2.用户登录验证 常用方法 update() ...
- Nginx均衡TCP协议服务器案例
Nginx在企业运维中通常用来均衡HTTP协议,例如我们熟知的80.8080.8081等服务.因为大部分的服务都是http请求访问协议,那有时候需要用到TCP协议,如果来实现均衡呢? 默认nginx不 ...
- 自动化运维工具——puppet详解（一）
一.puppet 介绍 1.puppet是什么 puppet是一个IT基础设施自动化管理工具,它能够帮助系统管理员管理基础设施的整个生命周期: 供应(provisioning).配置(configur ...
- JAVA中静态修饰符static的学习（初学）
静态修饰符static,用于修饰类中的成员变量和成员函数. 用static修饰的成员变量也可叫做类变量. 什么时候使用静态 什么时候定义静态成员变量? 当对象中出现共享数据时,将该数据定义为静 ...
- google guava cache缓存基本使用讲解
代码地址:https://github.com/vikde/demo-guava-cache 一.简介 guava cache是google guava中的一个内存缓存模块,用于将数据缓存到JVM内存 ...
- flask-login使用笔记
看外国文献的中文翻译 翻译的程度有的让人会疯,翻译最好的状态是异译 直译会显的很生硬 看起来确实难过:所以在看的时候,建议都看外国文献吧,或者自己用谷歌翻译,感觉比一些翻译的博客准多了: 在使用fl ...
- lodash源码分析之compact中的遍历
小时候, 乡愁是一枚小小的邮票, 我在这头, 母亲在那头. 长大后,乡愁是一张窄窄的船票, 我在这头, 新娘在那头. 后来啊, 乡愁是一方矮矮的坟墓, 我在外头, 母亲在里头. 而现在, 乡愁是一湾浅 ...
- 为WebClient增加Cookie的支持
我们经常会在应用程序中使用到WebClient模拟访问网站资源并且进行处理,如果多次访问之间我们希望为他们保存Cookie,换句话说,第一个请求产生的Cookie能自动带到第二个请求的话,可以通过自定 ...
- gulp管理静态资源缓存
前端项目在版本迭代的时候,难免会遇到静态缓存的问题,明明开发的是ok的,但是一部署到服务器上,发现页面变得乱七八糟,这是由于静态缓存引起的. 从上面这张图片可以看出,浏览器加载css,js等资源时,s ...