1.单点替换程序
这种效果可以看出，虽然被替换了，但是下面节点也没移动了。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript">
7 window.onload=function(){
8 var bjNode=document.getElementById("bj");
9 var rlNode=document.getElementById("rl");
10 var cityNode=document.getElementById("city");
11 alert(1);
12 cityNode.replaceChild(rlNode,bjNode);
13 }
14 </script>
15 </head>
16 <body>
17 <p>你喜欢哪个城市?</p>
18 <ul id="city">
19 <li id="bj" name="BeiJing">北京</li>
20 <li>上海</li>
21 <li>东京</li>
22 <li>首尔</li>
23 </ul><br><br>
24
25 <p>你喜欢哪款单机游戏?</p>
26 <ul id="game">
27 <li id="rl">红警</li>
28 <li>实况</li>
29 <li>极品飞车</li>
30 <li>魔兽</li>
31 </ul><br><br>
32 </body>
33 </html>
2.运行效果
3.节点互换
这种方式需要函数cloneNode（true）
4.程序
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript">
7 window.onload=function(){
8 var bjNode=document.getElementById("bj");
9 var rlNode=document.getElementById("rl");
10 var cityNode=document.getElementById("city");
11 var gameNode=document.getElementById("game");
12 alert(1);
13 var bjNode2=bjNode.cloneNode(true);
14 //顺序不许弄反
15 gameNode.replaceChild(bjNode2,rlNode);
16 cityNode.replaceChild(rlNode,bjNode);
17
18 }
19 </script>
20 </head>
21 <body>
22 <p>你喜欢哪个城市?</p>
23 <ul id="city">
24 <li id="bj" name="BeiJing">北京</li>
25 <li>上海</li>
26 <li>东京</li>
27 <li>首尔</li>
28 </ul><br><br>
29
30 <p>你喜欢哪款单机游戏?</p>
31 <ul id="game">
32 <li id="rl">红警</li>
33 <li>实况</li>
34 <li>极品飞车</li>
35 <li>魔兽</li>
36 </ul><br><br>
37 </body>
38 </html>
5.运行结果
6.自定义互换函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var bjNode=document.getElementById("bj");
var rlNode=document.getElementById("rl");
var cityNode=document.getElementById("city");
var gameNode=document.getElementById("game");
alert(1);
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>
</body>
</html>
7.效果
8.对应节点的互换，并且可以多次互换
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript">
7 window.onload=function(){
8 var liNodes = document.getElementsByTagName("li");
9 //2. 为每一个 li 节点添加 Onclick 响应函数
10 for(var i = 0; i < liNodes.length; i++){
11 //手动为每个 li 节点添加一个 index 属性
12 liNodes[i].index = i;
13 liNodes[i].onclick = function(){
14 //3. 找到和当前节点对应的那个 li 节点
15 var targetIndex = 0;
16 if(this.index < 4){
17 targetIndex = 4 + this.index;
18 }else{
19 targetIndex = this.index - 4;
20 }
21 //交换 index 属性，这个是重点，每次替换时也将index一起互换
22 var tempIndex = this.index;
23 this.index = liNodes[targetIndex].index;
24 liNodes[targetIndex].index = tempIndex;
25
26 //4. 互换.
27 replaceEach(this, liNodes[targetIndex]);
28 }
29 }
30
31 }
32 //自定义互换两个节点的函数
33 function replaceEach(aNode, bNode){
34 //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性
35 var aParent = aNode.parentNode;
36 var bParent = bNode.parentNode;
37
38 if(aParent && bParent){
39 //2. 克隆 aNode 或 bNode
40 var aNode2 = aNode.cloneNode(true);
41
42 //3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()
43 //方法实现节点的互换
44 bParent.replaceChild(aNode2, bNode);
45 aParent.replaceChild(bNode, aNode);
46 }
47 }
48 </script>
49 </head>
50 <body>
51 <p>你喜欢哪个城市?</p>
52 <ul id="city">
53 <li id="bj" name="BeiJing">北京</li>
54 <li>上海</li>
55 <li>东京</li>
56 <li>首尔</li>
57 </ul><br><br>
58
59 <p>你喜欢哪款单机游戏?</p>
60 <ul id="game">
61 <li id="rl">红警</li>
62 <li>实况</li>
63 <li>极品飞车</li>
64 <li>魔兽</li>
65 </ul><br><br>
66 </body>
67 </html>
9.运行结果
时间： 2024-11-03 01:52:15