8_JavaScript_DOM编程_创建并加入节点

Posted on In Views:

本节主要是练习创建和添加节点，使用到的方法见程序……

dom-7.html:

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
<!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>Untitled Document</title>
		
		<script type="text/javascript">
			
			//新创建一个元素节点, 并把该节点添加为文档中指定节点的子节点
			window.onload = function(){
				alert(1);
				
				//1. document.createElement(elementTagName)
				//新创建一个元素节点, 返回值为指向元素节点的引用
				//<li></li>
				var liNode = document.createElement("li");
				
				//2. 创建 "厦门" 的文本节点
				//document.createTextNode(string) 创建一个文本节点
				//参数为文本值, 返回该文本节点的引用. 
				var xmText = document.createTextNode("厦门");
				//<li>厦门</li>
				liNode.appendChild(xmText);
				
				var cityNode = document.getElementById("city");
				//2. elementNode.appendChild(newChild): 为 elementNode
				//新添加 newChild 子节点, 该子节点将作为 elementNode 的最后
				//一个子节点. 
				cityNode.appendChild(liNode);
			}
		
		</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>

做一个练习：

1、首先点击按钮之后判断单选框的情况

2、判断输入框中的文字，去除开头的空格

3、都符合格式之后我们添加文字到对应的节点

4、点击任何一个节点（li）都可以响应弹出该节点的文字

Ex-3.html：

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!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">
			window.onload = function(){
				var button = document.getElementsByName("button")[0];
				button.onclick = function(){
					var radioValue = getRadioValue();
					if(radioValue == "false"){
						alert("请至少选择一个选项！");
					}else{
						var inputNode = document.getElementsByName("username")[0];
						var string = inputNode.value;
						var inputText = deleteEmpty(string);
						if(inputText==undefined){
							alert("请输入有效的字符");
						}else{
							//alert(radioValue);
							//alert(inputText);
							var textNode = document.createTextNode(inputText);
							var liNode = document.createElement("li");
							var elementNode = document.getElementById(radioValue);
							liNode.appendChild(textNode);
							elementNode.appendChild(liNode);
							//为li添加弹出响应：
							liNode.onclick = function(){
								alert(liNode.firstChild.nodeValue);
							}
						}
					}
				}
				
				//为li添加弹出响应：
				var liNode = document.getElementsByTagName("li");
				for(var i=0; i< liNode.length;i++){
					liNode[i].onclick = function(){
						alert(this.firstChild.nodeValue);
					}
				}
			}
			
			function getRadioValue(){
				var value = "false";
				var genderNode = document.getElementsByName("gender");
				for(var i=0; i<genderNode.length; i++){
					if(genderNode[i].checked == true){
						value = genderNode[i].value;
					}
				}
				return value;
			}
			
			function deleteEmpty(string){
				if(string.length>0){
					var t = 0;
					for(var i=0;i<string.length;i++){
						//alert(string.slice(i,i+1));
						if(string.slice(i,i+1)==" "){
							t = i;
						}else{
							return string.slice(t,string.length);
						}
					}
				}
			}
			
			/*以下为教程答案示例：
			function showContent(liNode){
				alert("^_^#" + liNode.firstChild.nodeValue);
			}
			
			var liNodes = document.getElementsByTagName("li");
			for(var i = 0; i < liNodes.length; i++){
				liNodes[i].onclick = function(){
					showContent(this);
				}
			}
			
			//1. 获取 #submit 对应的按钮 submitBtn
			var submit = document.getElementById("submit");
			
			//2. 为 submitBtn 添加 onclick 响应函数
			submit.onclick = function(){
				
				//4. 检查是否选择 type, 若没有选择给出提示: "请选择类型"
				//4.1 选择所有的 name="type" 的节点 types
				var types = document.getElementsByName("type");
				
				//4.2 遍历 types, 检查其是否有一个 type 的 checked 属性存在, 就可说明
				//有一个 type 被选中了: 通过  if(元素节点.属性名) 来判断某一个元素节点是否有
				//该属性.
				var typeVal = null;
				for(var i = 0; i < types.length; i++){
					if(types[i].checked){
						typeVal = types[i].value;
						break;
					}
				}
				
				//4.3 若没有任何一个 type 被选中, 则弹出: "请选择类型". 响应方法结束: 
				//return false
				if(typeVal == null){
					alert("请选择类型");
					return false;
				}
				
				//5. 获取 name="name" 的文本值: 通过 value 属性: nameVal 
				var nameEle = document.getElementsByName("name")[0];
				var nameVal = nameEle.value;
				
				//6. 去除 nameVal 的前后空格. 
				var reg = /^\s*|\s*$/g;
				nameVal = nameVal.replace(reg, "");
				
				//使 name 的文本框也去除前后空格. 
				nameEle.value = nameVal;
				
				//6. 把 nameVal 和 "" 进行比较, 若是 "" 说明只出入了空格, 弹出 "请输入内容"
				//方法结束: return false
				if(nameVal == ""){
					alert("请输入内容");
					return false;
				}
				
				//7. 创建 li 节点
				var liNode = document.createElement("li");
				
				//8. 利用 nameVal 创建文本节点
				var content = document.createTextNode(nameVal);
				
				//9. 把 8 加为 7 的子节点
				liNode.appendChild(content);
				
				//11. 为新创建的 li 添加 onclick 响应函数
				liNode.onclick = function(){
					showContent(this);
				}
				
				//10. 把 7 加为选择的 type 对应的 ul 的子节点
				document.getElementById(typeVal)
				        .appendChild(liNode);
				
				//3. 在 onclick 响应函数的结尾处添加 return false, 就可以取消提交按钮的
				//默认行为. 
				return false;
			}*/
			
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li>北京</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="city"/>city
			<input type="radio" name="gender" value="game"/>game
	
		<br><br>
		name: <input type="text" name="username"/>
		
		<br><br>
		<input type="button" name="button" value="提交">
		
	</body>
</html>