js的六种元素选择器

た入场券 2023-07-04 04:44 19阅读 0赞

经常用到得六种选择器，适应于各种不同的情况

下列我就用代码来演示一下

## 感兴趣得朋友可以一一测试一下！ ##

## 示例代码如下： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript">
    			window.onload=function(){ 
    				// 通过js获取元素为其绑定单击响应函数有以下六种方法
    				
    				//一：通过id获取元素
    				//建议使用id选择器
    				 var sp=document.getElementById("sp");
    				
    				//二：通过calss类名获取元素
    				//用这种方法记得在最后加索引哦！
    				 var sp=document.getElementsByClassName("sp")[0];
    				
    				// 三：通过name属性获取元素 注意哦 是name属性！！！
    				//span中没有name属性 怪不得取大半天娶不到 你们也要注意哦
    				//input表签有name属性 下列我取得列子就没有name属性啦 所以用这个方法就获取不到
    				//<input type="button" name="" id="btn" value="变变变" />
    				 var sp=document.getElementsByName("span");
    				
    				/* 四：这个值得注意一下 我之前就是没有获取到 问了我的后端大神才晓得 用getElementsByClassName方法获取到所有的标签，它会返回一个类数组 获取数组中的信息需要索引，可以在获取元素紧跟后面加索引，如下： var sp=document.getElementsByTagName("span")[0]; 也可以在执行函数时紧跟它后面加索引，如下： btn.οnclick=function(){ sp[0].innerHTML="2" } */
    				 var sp=document.getElementsByTagName("span")[0];
    				
    				
    				// css选择器 这个就比较强大了 可以选择 标签名 属性 calss id
    				// 五： 选中span元素
    				var sp=document.querySelector("span");
    				
    				// 选中所有span元素 加索引就是表示选中第几个
    				// 六： 这个记得加索引哦
    				 var sp=document.querySelectorAll("span")[0]; 
    				
    				
    				var btn=document.getElementById("btn");
    				btn.onclick=function(){ 
    					sp.innerHTML=2
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" name="" id="btn" value="变变变" />
    		<br>
    		<span id="sp" class="sp" >1</span>
    	</body>
    </html>