前端杂学 | DOM方法练习

DOM小练习

下图为网页操作界面。

CSS样式代码

@CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}

HTML代码

"total">
			
"inner">
				

					你喜欢哪个城市?
				

				
"city">
					
"bj">北京
					
上海
					
东京
					
首尔
				
				
			
		
		
"btnList">
			
"btn01">创建一个"广州"节点,添加到#city下
			
"btn02">将"广州"节点插入到#bj前面
			
"btn03">使用"广州"节点替换#bj节点
			
"btn04">删除#bj节点
			
"btn05">读取#city内的HTML代码
			
"btn06">设置#bj内的HTML代码
			
"btn07">创建一个"广州"节点,添加到#city下
		

JavaScript代码

	<script type="text/javascript">
			
		window.onload=function(){
			//创建一个"广州"节点,添加到#city下
			Myclick("btn01",function(){
				var li = document.createElement("li");
				var gz = document.createTextNode("广州");
				li.appendChild(gz);
				var city = document.getElementById("city");
				city.appendChild(li);
			});
			//将"广州"节点插入到#bj前面
			Myclick("btn02",function(){
				var li = document.createElement("li");
				var gz = document.createTextNode("广州");
				var bj = document.getElementById("bj");
				var city = document.getElementById("city");
				li.appendChild(gz);
				//insertBefore(新节点，旧节点)
				city.insertBefore(li,bj);
			});
			//使用"广州"节点替换#bj节点
			Myclick("btn03",function(){
				var li = document.createElement("li");
				var gz = document.createTextNode("广州");
				var bj = document.getElementById("bj");
				var city = document.getElementById("city");
				li.appendChild(gz);
				//replaceChild(新节点，旧节点)
				city.replaceChild(li,bj);
			})
			//删除#bj节点
			Myclick("btn04",function(){				
				var bj = document.getElementById("bj");
				var city = document.getElementById("city");
				//子节点.parentNode.removeChild(子节点);
				bj.parentNode.removeChild(bj);
				
			})
			//读取#city内的HTML代码
			Myclick("btn05",function(){
				var city = document.getElementById("city");
				alert(city.innerHTML)
			})
			//设置#bj内的HTML代码
			Myclick("btn06",function(){
				var bj = document.getElementById("bj");
				bj.innerHTML = "成都";
			})
			//创建一个"广州"节点,添加到#city下(使用innerHtML)
			Myclick("btn07",function(){
				var li = document.createElement("li");
				var city = document.getElementById("city");
				li.innerHTML = "广州";
				city.appendChild(li);
				
			})
			
			
		};
			//定义外部点击函数
			function Myclick(id,fun){
				var btn=document.getElementById(id);			
				btn.onclick=fun;
			}
			
		</script>

注意事项

注意区分大小写！！！