js document对象-选择器

最新推荐文章于 2023-08-11 15:59:52 发布

神奇大叔

最新推荐文章于 2023-08-11 15:59:52 发布

阅读量2k

点赞数

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/102887876

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

document对象
浏览器对外提供的支持js的用来操作html文档的一个对象，此对象封存html文档
的所有信息,通过document调用时，是调用document内封存的信息，不是html文档

	**获取html元素对象**
	
		**直接获取**
			通过id
				window.getElementById("id名"); 返回值是id对应的对象
				
			通过name
				window.getElementsByName("name名"); id不能重复，name可以重复，所以是Elements
				以NodeList类数组形式存放name相同的对象
				
			通过标签名
				window.getElementsByTagName("标签名"); 以HTMLCollection类数组形式存放标签相同对象
				
			通过class
				window.getElementsByClassName("class名"); 以HTMLCollection类数组形式存放class相同对象
				
		**间接获取**
			父子关系
				通过父元素获取子元素
					var 父元素对象=document.getElementById("xx");
					var 子元素类数组=父元素对象.childNodes;
					
						/*获取父级元素*/
							var showdiv=document.getElementById("showdiv");
						/*获取子级元素*/	
							var childs=showdiv.childNodes;  返回Nodelist类数组
						/*获取当前节点的第一个子元素*/
							var first=showdiv.firstNode;
						/*获取当前节点的最后一个子元素*/
							var first=showdiv.lastNode;
			子父关系
				通过子元素获取父元素
					/*获取子级元素*/	
						var inp=document.getElementById("inp");
					/*获取父级元素*/
						var par=inp.parentNode;
						alert(par);
				
				
			兄弟关系
				元素位置的前后
					var inp=document.getElementById("inp");
					/*获取前面的紧跟元素对象*/
					var pre=inp.previousSibling;
					/*获取后面的紧跟元素对象*/
					var next=inp.nextSibling;
					
					
**HTMLColection 与 NodeList 的区别**
	HTMLCollection 是 HTML 元素的集合。
	NodeList 是一个文档节点的集合。
	NodeList 与 HTMLCollection 有很多类似的地方。
	NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
	NodeList 与 HTMLCollection 都有 length 属性。
	HTMLCollection 元素可以通过 name，id 或索引来获取。
	NodeList 只能通过索引来获取。
	只有 NodeList 对象有包含属性节点和文本节点。
	
	它们看起来像一个数组但是不是数组，可以叫类数组，无法使用数组的方法： valueOf(), pop(), push(), 或 join()。

代码示例:


<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function t1()
			{
				var inp=window.document.getElementById("uname");
				alert(inp);
			}
			function t2()
			{
				var inp2=window.document.getElementsByName("fav") //以数组形式存放name相同的对象
				alert(inp2.length);
			}
			
			function t3()
			{
				var inp3=document.getElementsByTagName("input");
				alert(inp3.length);
			}
			
			function t4()
			{
				var inp4=document.getElementsByClassName("common");
				alert(inp4);
			}
			
			function t5()
			{
				/*获取父级元素*/
				var showdiv=document.getElementById("showdiv");
				/*获取子级元素*/
				var childs=showdiv.childNodes;
				alert(childs.length);
			}
			
			function t6()
			{
				var inp=document.getElementById("inp");
				var par=inp.parentNode;
				alert(par);
				
			}
			function t7()
			{
				var inp=document.getElementById("inp");
				var pre=inp.previousSibling;
				var next=inp.nextSibling;
				alert(pre+":"+next);
			}
			
		</script>
		<style type="text/css">
			.common{
				
			}
			#showdiv{
				border:solid 1px orange;
				width:300px;
				height:300px;
				
			}
		</style>
	</head>
	<body>
		<input type="button" id="uname" name="uname" value="通过id获取对象" onclick="t1()" />
		<input type="button" value="通过name获取对象" onclick="t2()" />
		<input type="button" value="通过标签获取对象" onclick="t3()"/>
		<input type="button" value="通过class获取对象" onclick="t4()" />
		<hr />
		<input type="checkbox" name="fav" value="" onclick="" class="common"/>唱歌
		<input type="checkbox" name="fav" id="" value=""  class="common"/>跳舞
		<input type="checkbox" name="fav" id="" value="" />rap
		<input type="checkbox" name="fav" id="" value="" />篮球
		<hr />
		<input type="button" value="测试父子获取对象" onclick="t5()"  />
		<input type="button" value="测试子父获取对象" onclick="t6()"/>
		<input type="button" value="测试兄弟获取对象" onclick="t7()" />
		<hr />
		<div id="showdiv"><!--空白也算一个节点，所以一共有13个节点存在NodeList中-->
			<input type="button" value="" onclick="" /><input type="button" id="inp" value="" onclick="" />
			<input type="button" value="" onclick="" />
			<input type="button" value="" onclick="" />
			<input type="button" value="" onclick="" />
			<input type="button" value="" onclick="" />
		</div>

		
		
	</body>
</html>

神奇大叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js document对象-选择器

document对象浏览器对外提供的支持js的用来操作html文档的一个对象，此对象封存html文档的所有信息,通过document调用时，是调用document内封存的信息，不是html文档 **获取html元素对象** **直接获取** 通过id window.getElementById("id名"); 返回值是id对应的对象通过name ...
复制链接

扫一扫