您的位置：首页 > Web前端 > JavaScript

JavaScript的DOM编程--09--节点的替换

2015-09-25 16:05 531 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航