全兼容系列（1）--------用class选择元素

本文介绍了一种使用JavaScript实现自定义类选择器的方法。该方法适用于不支持标准'class'属性选择的旧版浏览器，通过遍历DOM元素并检查类名来实现。文章详细解释了如何定义函数findInClass()来查找特定类名，以及如何使用getByClass()函数来获取带有指定类的所有元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function findInClass(sclass,sclassFind){//--------------------------------------从sclass里面找一个叫sclassFind的名字
  var arr=sclass.split(' ');//--------------------------------------------------用空格将子元素的名字隔开放入数组并用变量存起来
  for(var i=0;i<arr.length;i++){//----------------------------------------------循环数组里的每一个名字
    if(arr[i]==sclassFind){//---------------------------------------------------若有一个名字与sclass相同则返回一个true
      return true;
    }
    return false;
  }
}
function getByClass(oParent,sclassFind){//--------------------------------------从父元素里寻找一个叫sclass名字的子元素
  if(oParent.getElementsByClassName){//-----------------------------------------若为真则说明浏览器支持，执行下面语句
    return oParent.getElementsByClassName(sclassFind);
  }else{//----------------------------------------------------------------------否则执行下面语句
    var aEle=oParent.getElementsByTagName('*');//-------------------------------获取父元素下的子元素，并用变量存起来
    var result=[];
    for(var i=0;i<aEle.length;i++){//-------------------------------------------循环子元素的每一项
      if(findInClass(aEle[i].className,sclassFind)){//--------------------------若某个子元素它里面有一个名字是我们要找的
        result.push(aEle[i]);//-------------------------------------------------则把这个子元素推到result这个数组里
      }
      return false;
    }
    return result;//------------------------------------------------------------将所有的符合条件的结果推出去
  }
}
window.onload=function(){
  var oUl=document.getElementById('ul1');
  var aBox=getByClass(oUl,'box1');//----------------用封装函数获取所有的box
  for(var i=0;i<aBox.length;i++){//----------------循环aBox里的每一项
    aBox[i].style.background='yellow';//-----------设置
  }
}
</script>
</head>
<body>
<ul id="ul1">
  <li></li>
  <li class="box1 b"></li>
  <li></li>
  <li class="bo bx"></li>
  <li></li>
  <li></li>
  <li class="box"></li>
  <li class="box1 a"></li>
  <li class="b cox"></li>
</ul>
</body>
</html>