9_JavaScript_DOM编程_替换节点及自定义的 replaceEach 方法

Posted on In Views:

本节学习节点的替换，及节点的互换，详见如下代码……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>替换节点</title>
		
		<script type="text/javascript">
			
			//替换节点 replaceChild方法
			window.onload = function(){
				//有替换和移动的功能
				var bjNode = document.getElementById("bj");
				var rlNode = document.getElementById("rl");
				
				var cityNode = document.getElementById("city");
				var gameNode = document.getElementById("game");
				
				//cityNode.replaceChild(rlNode, bjNode);
				
				
				
				/* //如果要实现节点的互换实现如下：(自己写的不正确)
				var cityLiNode = document.createElement("li");
				var gameLiNode = document.createElement("li");
				
				var gameNode = document.getElementById("game");
				
				gameNode.appendChild(gameLiNode);
				cityNode.appendChild(cityLiNode);
				
				cityNode.replaceChild(rlNode, cityLiNode);
				gameNode.replaceChild(bjNode, gameLiNode) */
				
				
				
				//实现互换，需要我们先找到一个中间变量才能转移成功
				//可以使用克隆来实现cloneNode(Boolean deep)----若deep为true则可以克隆子节点
				/* var bjNode2 = bjNode.cloneNode(true);
				
				alert("1");
				gameNode.replaceChild(bjNode2, rlNode);
				alert("2");
				cityNode.replaceChild(rlNode, bjNode); */
				replaceEach(cityNode, bjNode, gameNode, rlNode);
				
			}
			
			//将互换抽象成一个函数：
			function replaceEach(FatherNode1,Node1,FatherNode2,Node2){
				var Node1c = Node1.cloneNode(true);
				FatherNode2.replaceChild(Node1c, Node2);
				FatherNode1.replaceChild(Node2, Node1);
			}
			
/* 			//或者这样的函数：
			//自定义互换两个节点的函数
			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">北京</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>

练习：点击一个位置的li标签，相应位置的进行互换

ex-4：

注意的点：

1、我们循环完成之后并不能在点击的时候获取到本来的i值

2、我们在克隆的时候没有办法克隆属性值如index和onclick方法，所以需要手动加入

3、两组元素互换之后我们的元素的索引也需要同时改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>练习</title>
		
		<script type="text/javascript">
			
			//替换节点 replaceChild方法
			window.onload = function(){
				var liNode = document.getElementsByTagName("li");
				//alert(liNode.length);
				for(var i=0; i<liNode.length; i++){
					liNode[i].onclick = function(){
						//alert("1");
						var name = this.firstChild.nodeValue;
						//alert(name);
						//当然也可以为li添加一个index属性即可，即：liNodes[i].index = i;
						//当然如果使用index在交换中也需要互换,同时需要在交换之后改变index的值
						for(var t=0; t<liNode.length; t++){
							//alert(liNode[t].firstChild.nodeValue);
							if(name == liNode[t].firstChild.nodeValue){
								if(t<4){
									replaceEach(liNode[t], liNode[t+4]);
									break;
								}else{
									replaceEach(liNode[t], liNode[t-4]);
									break;
								}
							}
						}
					}
				}
			}
			
			//将互换抽象成一个函数：
			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函数进行同时复制
					aNode2.onclick = aNode.onclick;
					
					//如果用的是index那么我们也需要在这里去交换他
					//aNode2.index = aNode.index;
					
					
					//3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()
					//方法实现节点的互换
					bParent.replaceChild(aNode2, bNode);
					aParent.replaceChild(bNode, aNode);
				}
			}
			
			
			//教程范例做法：使用index:
			/* //自定义互换两个节点的函数
			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);
					
					//克隆 aNode 的同时, 把 onclick 事件也复制. 
					aNode2.onclick = aNode.onclick;
					
					//克隆 aNode 的同时, 把 onclick 事件也复制. 
					aNode2.index = aNode.index;
					
					//3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()
					//方法实现节点的互换
					bParent.replaceChild(aNode2, bNode);
					aParent.replaceChild(bNode, aNode);
				}
			}
			
			//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(){
					
					//alert("index: " + this.index);
					
					//3. 找到和当前节点对应的那个 li 节点
					var targetIndex = 0;
					
					if(this.index < 4){
						targetIndex = 4 + this.index;
					}else{
						targetIndex = this.index - 4;
					}
					
					//交换 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">北京</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>
		
		
	</body>
</html>