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);
}
}
}
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Untitled Document</title>
6
7 <script type="text/javascript">
8
9 //测试 replaceChild 方法
10 window.onload = function(){
11
12 alert(1);
13
14 var bjNode = document.getElementById("bj");
15 var rlNode = document.getElementById("rl");
16 var gameNode = document.getElementById("game");
17
18 // gameNode.replaceChild(bjNode, rlNode);
19
20 //replaceEach(bjNode, rlNode);
21
22 /*
23 var cityNode = document.getElementById("city");
24 //cityNode.replaceChild(rlNode, bjNode);
25
26 //实现 bj 节点和 rl 节点的互换.
27 var gameNode = document.getElementById("game");
28
29 //克隆 bjNode
30 //cloneNode(deep) 若 deep 为true, 则可以克隆子节点
31 var bjNode2 = bjNode.cloneNode(true);
32 gameNode.replaceChild(bjNode2, rlNode);
33
34 alert(2);
35
36 cityNode.replaceChild(rlNode, bjNode);//rlNode为换后新的，bjNode为换前旧的
37 */
38 replaceEach(bjNode,rlNode);//方法二 定义函数方法，实现互换
39 }
40
41 //方法二。。。。自定义互换两个节点的函数
42 function replaceEach(aNode, bNode){
43 //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性
44 var aParent = aNode.parentNode;
45 var bParent = bNode.parentNode;
46
47 if(aParent && bParent){
48 //2. 克隆 aNode 或 bNode
49 var aNode2 = aNode.cloneNode(true);
50 51 //3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()
52 //方法实现节点的互换
53 bParent.replaceChild(aNode2, bNode);
54 aParent.replaceChild(bNode, aNode);
55 }
56 }
57
58 </script>
59
60 </head>
61 <body>
62 <p>你喜欢哪个城市?</p>
63 <ul ><li name="BeiJing">北京</li>
64 <li>上海</li>
65 <li>东京</li>
66 <li>首尔</li>
67 </ul>
68
69 <br><br>
70 <p>你喜欢哪款单机游戏?</p>
71 <ul >
72 <li >红警</li>
73 <li>实况</li>
74 <li>极品飞车</li>
75 <li>魔兽</li>
76 </ul>
77
78 <br><br>
79 gender:
80 <input type="radio" name="gender" value="male"/>Male
81 <input type="radio" name="gender" value="female"/>Female
82
83 <br><br>
84 name: <input type="text" name="username" value="atguigu"/>
85
86 </body>
87 </html> 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Untitled Document</title>
6
7 <script type="text/javascript">
8
9 //需求：为所有的li节点 添加onclick响应函数
10 //实现city子节点和game子节点对应位置的元素的互换
11 window.onload=function(){
12 //互换的方法
13 function replaceEach(aNode, bNode){
14 //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性
15 var aParent = aNode.parentNode;
16 var bParent = bNode.parentNode;
17
18 if(aParent && bParent){
19 //2. 克隆 aNode 或 bNode
20 var aNode2 = aNode.cloneNode(true);
21 //交换onclick事件 克隆aNode的同时 也把onclick 复制
22 aNode2.onclick=aNode.onclick;
23 //交换index 属性 克隆aNode的同时 也把index 复制
24 aNode2.index=aNode.index;
25 //3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()
26 //方法实现节点的互换
27 bParent.replaceChild(aNode2, bNode);
28 aParent.replaceChild(bNode, aNode);
29 //父亲元素.replaceChild(新，旧)
30 }
31 }
32
33 //1.获取所有的li节点
34 var liNodes=document.getElementsByTagName("li");
35 //2.为每一个li节点添加onclick响应函数
36 for(var i=0;i<liNodes.length;i++){
37 //手动为每个li节点添加一个index属性
38 liNodes[i].index=i;
39 liNodes[i].onclick=function(){
40 //3.找到和当前节点对应的那个li节点
41 // alert(this.index);
42 // alert("index："+this.index);
43 var targetIndex=0;
44 if(this.index<4){
45 targetIndex=4+this.index;
46 }else{
47 targetIndex=this.index-4;
48 }
49
50 // alert(liNodes[targetIndex].firstChild.nodeValue);
51 //交换index属性
52 var tempIndex=this.index;
53 this.index=liNodes[targetIndex].index;
54 liNodes[targetIndex].index=tempIndex;
55
56 //4.互换
57 replaceEach(this,liNodes[targetIndex]);
58 }
59
60 }
61 }
62
63 </script>
64
65 </head>
66 <body>
67 <p>你喜欢哪个城市?</p>
68 <ul ><li name="BeiJing">北京</li>
69 <li>上海</li>
70 <li>东京</li>
71 <li>首尔</li>
72 </ul>
73
74 <br><br>
75 <p>你喜欢哪款单机游戏?</p>
76 <ul >
77 <li >红警</li>
78 <li>实况</li>
79 <li>极品飞车</li>
80 <li>魔兽</li>
81 </ul>
82
83 <br><br>
84 gender:
85 <input type="radio" name="gender" value="male"/>Male
86 <input type="radio" name="gender" value="female"/>Female
87
88 <br><br>
89 name: <input type="text" name="username" value="atguigu"/>
90
91 </body>
92 </html>