Js中Dom查询练习

最新推荐文章于 2023-02-06 09:55:54 发布

原创最新推荐文章于 2023-02-06 09:55:54 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了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>