Js中Dom查询练习

本文介绍了JavaScript中的DOM查询方法,包括通过document对象获取元素的方法如getElementById、getElementsByTagName和getElementsByName,以及通过元素节点获取子节点、父节点和兄弟节点的方法,如getElementsByTagName、childNodes、parentNode等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Dom查询方法

一 ,获取元素节点

通过document对象调用
1.getElementById() 通过id属性获取一个元素节点对象
2.getElementsByTagName() 通过标签名获取一组元素节点对象
3.getElementsByName() 通过name属性获取一组元素节点对象

二,获取元素节点的子节点

通过具体的元素节点调用
1.getElementByTagName() 返回当前节点的指定标签名后代节点
2.childNodes 表示当前节点的所有子节点 chlidren属性可以获取当前元素的所有子元素
3.firstChild 表示当前节点的第一个子节点 firstElementChild获取当前元素的第一个子元素
4.lastChild 表示当前节点的最后一个字节点

三,获取父节点和兄弟节点

通过具体的节点调用
1.parentNode 表示当前节点的父节点
2.previousSibling 表示当前节点的前一个兄弟节点
3.nextSibling 表示当前节点的后一个兄弟节点

题目:

	查找#bj的节点
	查找所有li的节点
	查找name=gender的节点
	查找#city下所有li的节点
	返回#city下所有子节点
	返回#phone的第一个子节点
	返回#bj的父节点
	返回#android的前一个兄弟节点
	返回#username的value属性值
	设置#username的value属性值
	返回#bj的文本值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM查询</title>
	<style>
		.total{
			width:400px;
			height:650px;	
			border:1px solid red;
		}
		li{
			color:#20E15A;
		}
	</style>
	
	<script>
		/*
		定义一个函数 ,专门用来为指定元素绑定单击响应函数
		参数:
			idstr 要绑定单击响应函数的对象的id属性值
		*/
	function Myclick(idstr,fun){
		var btn=document.getElementById(idstr);
		btn.onclick=fun;
		}
			
	window.onload=function(){
		//为id为btn01的按钮绑定一个单击响应函数
		var btn01=document.getElementById("btn01");
		btn01.onclick=function(){
			//查找#bj的节点
			var bj=document.getElementById("bj");
			alert(bj.innerHTML);
		}
		
		var btn02=document.getElementById("btn02");
		btn02.onclick=function(){
			//查找所有li的节点
			//这个方法会给我们返回一个类数组对象,所有查询到的元素都会分装到对象中
			var li=document.getElementsByTagName("li");
			for(var i=0;i<=li.length;i++){
				alert(li[i].innerHTML);
				/*
				innerHTML用于获取内部的HTML代码的
				对于自结束标签,这个属性没有意义
				*/
			}
		}
		
		var btn03=document.getElementById("btn03");
		btn03.onclick=function(){
			//查找name=gender的节点
			var gender=document.getElementsByName("gender");
			for(var i=0;i<=gender.length;i++){
				alert(gender[i].value);
				/*
				如果要读取元素节点属性
				直接使用元素.属性名
				例如:元素.name 元素.id
				注意class属性不能采用这种方式
				读取class属性时需要使用元素.className
				*/
			}
		}
		
		var btn04=document.getElementById("btn04");
		btn04.onclick=function(){
			//获取id为city的节点
			var city=document.getElementById("city");
			
			//查找#city下所有li的节点
			var lis=city.getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				alert(lis[i].innerHTML);
			}
		}
		
		var btn05=document.getElementById("btn05");
		btn05.onclick=function(){
			//返回#city下所有子节点
			var city=document.getElementById("city");
			var cns=city.childNodes;
			/*
			childNodes属性会获取包括文本节点在内的所有节点
			根据Dom标签之间的空白会当成文本节点
			*/
			alert(cns.length);  //返回 9
			
			var cns2=city.children;
			for(var i=0;i<cns2.length;i++){
				alert(cns2[i].innerHTML);
			} 
		}
		
		var btn06=document.getElementById("btn06");
		btn06.onclick=function(){
			//返回#phone的第一个子节点
			var phone=document.getElementById("phone");
			var ph=phone.firstChild;
			alert(ph.innerHTML);
		}
		
		var btn07=document.getElementById("btn07");
		btn07.onclick=function(){
			//返回#bj的父节点
			var bj=document.getElementById("bj");
			var beijing=bj.parentNode;
			//alert(beijing.innerHTML);
			/*
			innerText 
			该属性可以获取到元素内部的文本内容
			和inner HTML类似 但是会将标签去除
			*/
			alert(beijing.innerText);
		}
		
		Myclick("btn08",function(){
			//返回#android的前一个兄弟节点
			var android=document.getElementById("android");
			var Ad=android.previousSibling;
			alert(Ad.innerText)	;
		})
		
		Myclick("btn09",function(){
			//返回#username的value属性值
			var username=document.getElementById("username");
			alert(username.value);
		})
		
		Myclick("btn10",function(){
			//设置#username的value属性值
			var username=document.getElementById("username");
			username.value="臭猪";
		})
		
		Myclick("btn11",function(){
			//返回#bj的文本值
			var bj=document.getElementById("bj");
			alert(bj.innerText);
		})	
	}
	</script>
</head>
<body>
	<div class="total">
		<div class="inner">
			
			<p>你喜欢那个城市?</p>
		
			<ul id="city">
				<li id="bj">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>
			<br>
		
			<p>你喜欢那款单机游戏?</p>
	
			<ul>
				<li id="rl">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽世界</li>
			</ul>
			<br/>
			
			<p>你手机的操作系统是?</p>
			
			<ul id="phone"><li>IOS</li><li id="android">Android</li><li>windows Phone</li></ul>
		</div>
		
		<div class="inner">
			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><br>

	<div id="btnList">
		<div><button id="btn01">查找#bj的节点</button></div><br>
		<div><button id="btn02">查找所有li的节点</button></div><br>
		<div><button id="btn03">查找name=gender的节点</button></div><br>
		<div><button id="btn04">查找#city下所有li的节点</button></div><br>
		<div><button id="btn05">返回#city下所有子节点</button></div><br>
		<div><button id="btn06">返回#phone的第一个子节点</button></div><br>
		<div><button id="btn07">返回#bj的父节点</button></div><br>
		<div><button id="btn08">返回#android的前一个兄弟节点</button></div><br>
		<div><button id="btn09">返回#username的value属性值</button></div><br>
		<div><button id="btn10">设置#username的value属性值</button></div><br>
		<div><button id="btn11">返回#bj的文本值</button></div>	
	</div>
</body>
</html>


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值