document对象

最新推荐文章于 2024-08-26 17:50:05 发布

you些话

最新推荐文章于 2024-08-26 17:50:05 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_44805105/article/details/110859530

js 专栏收录该内容

23 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>document对象学习</title>
		<script type="text/javascript">
			//document获取元素对象
			      //id方式
			      function testGetEleById(){
			      	var inp=window.document.getElementById("uname");
			      	alert(inp);
			      }
			      //name方式
			      function testGetElebyName(){
			      	var favs=document.getElementsByName("fav");
			      	alert(favs);
			      }
			      //标签名
			      function testGetEleByTagName(){
			      	var inps=document.getElementsByTagName("input");
			      	alert(inps);
			      }
			      //class属性
			      function testGetEleByClassName(){
			      	var inps=document.getElementsByClassName("common");
			      	alert(inps+":"+inps.length);
			      }
			//间接获取方式
			    //父子关系
			      function testParent(){
			      	//获取父级元素对象
			      	var showdiv=document.getElementById("showdiv");
			      	//获取所有的子元素对象数组
			      	var childs=showdiv.childNodes;
			      	alert(childs+":"+childs.length);
			      }
			 
			 //子父关系
			 function testChild(){
			 	//获取子元素对象
			 	var inp=document.getElementById("inp");
			 	var div=inp.parentNode;
			 	alert(div);
			 }
			 //兄弟关系
			 function testBrother(){
			 	var inp=document.getElementById("inp");
			 	var preEle=inp.previousSibling;//弟获兄
			 	var nextEle=inp.nextSibling;//兄获弟
			 	alert(preEle+"::::"+nextEle);
			 }
		</script>
		<style type="text/css">
			.common{}
			#showdiv{
				border: solid 2px orange;
			}
			
		</style>
	</head>
	<body>
	<h3> docunment对象的概念和获取元素对象学习</h3>
	对象获取方式学习：<br />
	<input type="button" value="测试获取HTML元素对象--id"onclick="testGetEleById();" /><!--[object HTMLInputElement]-->
	<input type="button" value="测试获取HTML元素对象--name"onclick="testGetElebyName();" /><!--[object NodeList]-->
	<input type="button" value="测试获取HTML元素对象--TagName"onclick="testGetEleByTagName();" /> <!--[object HTMLCollection]-->
	<input type="button" value="测试获取HTML元素对象--className"onclick="testGetEleByClassName();" /> <!--[object HTMLCollection]:3-->
	
	
	
	<hr />
	<br />
	用户名：<input type="text" name="uname"id="uname" value="张三" /><br /><br />
	<input type="checkbox" name="fav" id="fav" value=""class="common" />唱歌
	<input type="checkbox" name="fav" id="fav" value=""class="common" />睡觉
	<input type="checkbox" name="fav" id="fav" value=""class="common" />打游戏
	<hr />
	<br />
	间接获取方式学习：<br />
	<input type="button" name="" id="" value="测试父子关系" onclick="testParent();" /> <!--[object NodeList]:11-->
	<input type="button" name="" id="" value="测试字父关系" onclick="testChild();" /> <!--[object HTMLDivElement]-->
	<input type="button"name="" id="" value="测试兄弟关系" onclick="testBrother();" /><!--[object Text]::::[object Text]-->
	<div id="showdiv">
	<input type=""name=""id=""value="" />
	<input type=""name=""id="inp"value="" />
	<input type=""name=""id=""value="" />
	<input type=""name=""id=""value="" />
	<input type=""name=""id=""value="" />
	
	
	
	</div>
	</body>
</html>