js的六种元素选择器

最新推荐文章于 2024-07-12 08:35:59 发布

chenronglong20

最新推荐文章于 2024-07-12 08:35:59 发布

阅读量6k

点赞数 1

本文链接：https://blog.csdn.net/chenronglong20/article/details/104217669

版权

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

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

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

示例代码如下：

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

chenronglong20

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js的六种元素选择器

经常用到得六种选择器，适应于各种不同的情况下列我就用代码来演示一下感兴趣得朋友可以一一测试一下！示例代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javasc...
复制链接

扫一扫