总结了几种方法,先放方法,后面介绍区别。
1 doucment.getElementsByClassName("cssName");//cssName为css的名称
2.1 document.querySelector("标签名.cssName");//标签名指的是div,button,a,li这种
2.2 document.querySelector(".cssName");
3.1 document.querySelectorAll("标签名.cssName");
3.2 document.querySelectorAll(".cssName");
测试用的HTML:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<style>
.css1{
width:100px;
height:110px;
background-color:#ccc;
}
.css2{
width:100px;
height:120px;
background-color:#aab;
}
.css3{
width:100px;
height:130px;
background-color:#bba;
}
</style>
</head>
<body>
<div class="css1">这是div.css1</div>
<div class="css2">这是div.css2</div>
<button class="css1">这是button.css1</button>
<div class="css3">这是div.css3</div>
</body>
</html>
我们在Console中去运行JS然后看差别:
1.)第一种方法是比较常见也常用的,能取得整个页面匹配的元素,返回的是一个数组,测试文件中有两个元素引用了css1,所以输出了2
2.1)第二种方法则是取第一个匹配符合标签名且符合css名称的元素,返回的是单个元素对象(注意,只取第一个匹配到的元素)
2.2)同样只取第一个匹配到的元素,返回单个元素对象,差别在于,这个没有标签名限制(注意:打css名的时候不能少了前面的那个点.)
3.1取所有匹配标签名且匹配css名的元素,返回数组对象
3.2 同理,取所有符合css名称的对象,返回一个数组,这方法与第1种方法效果一样(具体差别就不清楚了)
总结:第一种方法和最后一种(3.2)效果一样,而2.1,2.2,3.1都是根据自己的需求而使用