JS 经典DOM查询页面

最新推荐文章于 2022-08-02 17:19:07 发布

finedayforu

最新推荐文章于 2022-08-02 17:19:07 发布

阅读量353

点赞数

本文链接：https://blog.csdn.net/finedayforu/article/details/104154580

版权

主要是练习DOM定位和查询；

点相应的button查询DOM

HTML+JS部分

        <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/page_index.css">
		<script type="text/javascript">
			function myClick(but,butonclick){
				var buta=document.getElementById(but);
				buta.onclick=butonclick;
			}
			window.onload=function(){

				myClick("but01",function(){
					alert(document.getElementById("bj").innerHTML)
				});
				
				myClick("but02",function(){
					var lis=document.getElementsByTagName("li");
					for (var i=0;i<lis.length;i++)
					{
						alert(lis[i].innerHTML);
					}
				});
				
				myClick("but03",function(){
					var lis=document.getElementsByName("gender");
					for (var i=0;i<lis.length;i++)
					{
						alert(lis[i].value);
					}
				});
				
				myClick("but04",function(){
					var city=document.getElementById("city");
					var citys=city.getElementsByTagName("li");
					for (var i=0;i<citys.length;i++)
					{
						alert(citys[i].innerHTML);
					}
				});
				
				myClick("but05",function(){
					var city=document.getElementById("city")
					var citys=city.childNodes;
					for (var i=0;i<citys.length;i++)
					{
						alert(citys[i]);
					}
				});
				
				myClick("but06",function(){
					var phone=document.getElementById("phone");
					alert(phone.firstChild);
				});
				
				myClick("but07",function(){
					var bj=document.getElementById("bj");
					alert(bj.parentNode.id);
				});
				myClick("but08",function(){
					var android=document.getElementById("android");
					alert(android.previousSibling.innerHTML);
				});
				myClick("but09",function(){
					var txt=document.getElementById("username");
					alert(txt.value);
					
				});
				myClick("but10",function(){
					var txt=document.getElementById("username");
					txt.value="zhangzhangzhang";
				});
				myClick("but11",function(){
					alert(document.getElementById("bj").innerHTML)
				});
			}
		</script>
	</head>
	<body>
		<div class="all">
			<div class="fevor  inner">
				<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>
				<p>你手机的操作系统是：</p>
				<ul id="phone"><li>IOS</li><li id="android">android</li><li>Windows Phone</li>
				</ul>
			</div>
			<div class="buts  inner">
				<button type="button" id="but01">查找#bj节点</button>
				<button type="button" id="but02">查找所有li节点</button>
				<button type="button" id="but03">查找name=gender的所有节点</button>
				<button type="button" id="but04">查找#city下的所有li节点</button>
				<button type="button" id="but05">返回#city下的所有子节点</button>
				<button type="button" id="but06">返回#phone下的第一个子节点</button>
				<button type="button" id="but07">返回#bj的父节点</button>
				<button type="button" id="but08">返回#android的前一个兄弟节点</button>
				<button type="button" id="but09">返回#username的value属性</button>
				<button type="button" id="but10">设置#username的value属性</button>
				<button type="button" id="but11">返回#bj文本值</button>
			</div>
			<div class="basic  inner">
				<span>gender:</span>
				<input type="radio" name="gender" id="" value="male" />male
				<input type="radio" name="gender" id="" value="female" />female
				<br>
				<br>
				<span>name:</span>
				<input type="text" id="username" value="asdasdas" />
			</div>
		</div>
		
	</body>
</html>

CSS部分：

        .all{
	width: 1040px;
	height: 580px;
	/* background-color: yellowgreen; */
	border:black,solid,1px;
	margin: 10px auto;
}

.fevor{
	width: 570px;
	height: 410px;
	/* background-color: peachpuff; */
	border-style: solid;
	border-width: 1px;
	float: left;
	padding: 0.625rem;
}

.buts{
	width: 420px;
	height: 580px;
	/* background-color: aquamarine; */
	float: right;
	
}
.basic{
	width: 570px;
	height: 100px;
	/* background-color: aquamarine; */
	float: left;
	border-style: solid;
	border-width: 1px;
	margin-top: 10px;
	font:20px "arial" ;
	padding: 10px;
}
.buts button{
	width: 420px;
	height: 34px;
	margin:0 auto 19px ;
}
.fevor p{
	margin: 40px 0px;
}
.fevor li{
	font-size: 20px;
	float: left;
	padding: 10px;
	margin: 0 10px 15px 0;
	border: black solid 1px;
	background-color:aquamarine;
}