前端基础 | 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代码

<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

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

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>

注意事项

注意区分大小写！！！