22.4 JS中 DOM获得元素方式：直接获得，间接获得

最新推荐文章于 2024-07-16 17:39:09 发布

快乐的小毛毛虫

最新推荐文章于 2024-07-16 17:39:09 发布

阅读量98

点赞数

分类专栏：前端文章标签： html5 javascript css

本文链接：https://blog.csdn.net/qq_45689826/article/details/120011607

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/***********直接获得节点对象的方式***************/
			function demo1(){
				//通过id的方式直接获得一个对象
				var h = document.getElementById("but");
				alert(h);
			}
			function demo2(){
				//通过标签名获得元素对象， 获得的是多个对象  通过下标获得某一个
				var inp = document.getElementsByTagName("input");
				alert(inp[2];
			}
			function demo3(){
				//通过name属性获得
				var inp = document.getElementByName("text1");
				alert(inp.length);
			}
			
			/***********间接获得节点对象的方式***************/
			function demo4(){
				//获得父节点
				var p1 = documnet.getElementById("but");
				//获得子元素 注意：空白的文档也算是一个子节点
				var child = p1.childNodes;
				console.log(child);
			}
			
			function demo5(){
				var p2 = documnet.getElementById("but");
				//获得父节点
				var parent = p2.parentNode;
				console.log(parnent);
			}
			
			function demo6(){
				var p2 = document.getElementById("p2");
				
				//获得下一个节点包含空白文档
				var next = p2.nextSibling.nextSibling;
				//获得下一个节点不包含空白文档
				var next = p2.nextElenmentSibling;
				
				//获得上一个节点对象包含空白文档
				var up = p2.previouSibling.previousSibling;
				//获得上一个节点对象不包含空白文档
				var up = p2.previousElementSibling;
				console.log(up);
			}
			
		</script onload = "demo3()">
	</head>
	<body>
		<form>
			<input type = "text" name = "text1"/>
			<input type = "checkbox" name = "text1"/>
			<input type = "button" name = "button1"/>
			<input type = "button" name = "button2" id = "but"/>
			
		</form>
	</body>
</html>

快乐的小毛毛虫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
22.4 JS中 DOM获得元素方式：直接获得，间接获得

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> /***********直接获得节点对象的方式***************/ function demo1(){ //通过id的方式直接获得一个对象 var h = document.getEleme...
复制链接

扫一扫