dom查询

DOM操作实例解析

最新推荐文章于 2024-06-28 18:10:28 发布

原创最新推荐文章于 2024-06-28 18:10:28 发布 · 143 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="dom.css">
<script type="text/javascript">
	window.onload=function(){
		var btn01=document.getElementById("btn01");
		btn01.onclick=function(){
			var bjEle=document.getElementById("bj");
			//alert(bjEle);
			//通过id找到bj节点
			//alert(bjEle.nodeName);
			//获取节点内部html代码断
			//alert(bjEle.innerHTML);
			//获取节点内部文本内容
			//alert(bjEle.innerText);
			var firstEle=bjEle.firstChild;
			//第一个子节点
			alert(firstEle.nodeValue);
		};
		//查找所有li节点
		var btn02=document.getElementById("btn02");
		btn02.onclick=function(){
			var LiEle=document.getElementsByTagName("li");
				//alert(LiEle.length);
				for( var i=0;i<LiEle.length;i++){
					var lis=LiEle[i];
					alert(lis.innerText);
				}
		};
		var btn03=document.getElementById("btn03");
		btn03.onclick=function(){
			//按名字查询
			var genderEles=document.getElementsByName("gender");
			//alert(genderEles.length);
			for(var i=0;i<genderEles.length;i++){
				var genderList=genderEles[i];
				alert(genderList.value);
			}
		};//先按id名查询city，再查询city下的标签
		var btn04=document.getElementById("btn04");
		btn04.onclick=function(){
			var cityEle=document.getElementById("city");
			var cityE=cityEle.getElementsByTagName("li");
			//遍历所有li标签的元素
			for(var i=0;i<cityE.length;i++){
				var ele=cityE[i];
				alert(ele.innerText);
			}
			};
			
			var btn05=document.getElementById("btn05");
			btn05.onclick=function(){
				var cityele=document.getElementById("city");
				//所有子节点
				var childs=cityele.childNodes;
				alert(childs.length);
				
			};
		
		
}
</script>
</head>
<body>
	<div id="total">
你最喜欢哪个城市？<br/>
<ul id="city">
<li>广州</li>
<li id="bj">北京</li>
<li>上海</li>
</ul><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="name" id="username"value="abcde"/>

</div>
<div class="div02">
<button id="btn01">查找01节点</button><br/>
<button id="btn02">查找02节点</button><br/>
<button id="btn03">查找03节点</button><br/>
<button id="btn04">查找04节点</button><br/>
<button id="btn05">查找05节点</button><br/>
<button id="btn06">查找06节点</button><br/>
<button id="btn08">查找07节点</button><br/>
<button id="btn09">查找08节点</button>
</div>
</body>
</html>