在js中通过document.getElementsByClassName()在低版本IE浏览器中不兼容。然后我写了几种方案,大家可以参考参考。
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>1</p> <p>2</p> <p class=" r aaa">3</p> <p>4</p> <p class="aaa">5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> </body> </html>
js代码
<script>
// 方案1 :正则
function getClass(className){
// 获取所有标签
var lis = document.getElementsByTagName('*');
// 保存过滤后的标签
var arr = [];
for(var i=0;i<lis.length;i++){
// 创建正则,通过正则的test方法判断当前元素的class中是否存在正则中的内容,返回一个true或者false
if(new RegExp(className).test(lis[i].className)){
// 如果有则添加到arr中
arr.push(lis[i]);
}
}
// 返回过滤后的数组。
return arr;
}
// 方案2 :利用字符串的indexOf判断 找不到返回-1
function getClass1(className){
// 获取所有元素
var lis = document.getElementsByTagName('*');
// 保存过滤后的数组
var arr = [];
for(var i=0;i<lis.length;i++){
// 判断所有标签的class有没有我们想要的
if(lis[i].className.indexOf(className)!=-1){
// 添加到新数组
arr.push(lis[i]);
}
}
// 返回
return arr;
}
console.log(getClass('aaa'));
// [p.r.aaa, p.aaa]
console.log(getClass1('aaa'));
// [p.r.aaa, p.aaa]
</script>
还可以将获取到的class转换成数组,然后挨个判断,不过这样反而更麻烦了。
建议通过父级再通过*获取元素,性能会好一些。
唉,感觉自己写新手慢慢的看不懂了,也许真的是自己进步了吧,不知道是高兴还是悲伤。