javascript学习之通过class获取元素

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通过class获取元素</title>
<style type="text/css">
ul li{ list-style: none; height: 20px; padding: 10px;line-height: 20px;}
ul li.red{ background: #999;}
</style>
<script type="text/javascript">
/*
//第一种
function getByClass(obj,attr){
var aEle = obj.getElementsByTagName('*');
var arr = [];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className == attr){
arr.push(aEle[i]);
}
}
return arr;
}*/
/*
//第二种
function getByClass(obj,sClass){
var aEle = obj.getElementsByTagName("*");
var aRes = [];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className.indexOf(sClass) != -1){
aRes.push(aEle[i]);
}
}
return aRes;
}*/
function findAttr(obj,sClass){
for(var i=0;i<obj.length;i++){
if(obj[i] == sClass) return true;
}
return false;
}
function getByClass(obj,sClass){
if(obj.getElementsByClass){//这个getElementsByClass不兼容Ie8以下的,
var aEle = obj.getElementsByClass(sClass);
return aEle;
}else{
var aEle = obj.getElementsByTagName("*");
var aRes = [];
for(var i=0;i<aEle.length;i++){
var aTmp = aEle[i].className.split(' ');
if(findAttr(aTmp,sClass)){
aRes.push(aEle[i]);
}
}
return aRes;
}
}
window.onload = function(){
var oDiv = document.getElementById("div1");
var oUl = getByClass(oDiv,'ul1');
var aLi = getByClass(oUl[0],'red');
alert(aLi.length);
}
</script>
</head>
<div id="div1">
<ul class="ul1">
<li class="red">11111</li>
<li>22222</li>
<li class="red blue">3333</li>
<li>55555</li>
<li class="red">5555</li>
<li>6666</li>
</ul>
</div>
</html>

javascript不像Jquery那样可以很容易的获取元素,今天写了一个小方法Javascript通过class获取元素网址:yii666.com

1.用'=='来判断,这个判断如果class有多个会获取不到文章地址https://www.yii666.com/article/758097.html文章来源地址:https://www.yii666.com/article/758097.html

2.用indexOf来判断,这个判断如果class有包含你要的找的class也会获取到,如:你要找class='test',但是有一个class='tests'也会被获取到文章来源地址https://www.yii666.com/article/758097.html网址:yii666.com<

3.这个不会出错

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png