js的六种元素选择器

最新推荐文章于 2025-10-09 04:34:51 发布

原创最新推荐文章于 2025-10-09 04:34:51 发布 · 6.5k 阅读

CC 4.0 BY-SA版权

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

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

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

示例代码如下：

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