经常用到得六种选择器,适应于各种不同的情况
下列我就用代码来演示一下
感兴趣得朋友可以一一测试一下!
示例代码如下:
<!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>