欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端杂学 | DOM方法练习

程序员文章站 2022-06-22 11:35:41
深入理解JavaScipt DOM...

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>

注意事项

注意区分大小写!!!

本文地址:https://blog.csdn.net/YuvalNoah/article/details/107875808