js document对象-选择器

深藏阁楼爱情的钟 2021-07-24 23:11 432阅读 0赞

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">
    			<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>