DOM元素灵活获取元素

一，JS有获取元素的方法：

• getElementById(); 这个只适合那种只要获取一两个元素的操作，一旦要批量操作很多元素的时候就显得很麻烦了
• getElementsByTagName();这个只适合那种要获取一大批元素操作权的地方，但是也很烦，太不精确了
• 用className选择元素：这样你就可以根据自己的需要来选中你想要的元素，这个简直太方便啦！

下面举个例子看看怎么使用className:

//将所有class为box的li选出来 并将他们的背景色改成红色
      var oUl=document.getElementById('ul3');
      var aLi=oUl.getElementsByTagName('li');
      for(var i=0;i<aLi.length;i++){
        if(aLi[i].className=='box'){
          aLi[i].style.background='red';
        }
      }

还可以对这个函数进行封装，能够得到与上述一样的效果：

  //将以上函数进行封装，以后要到某个标签下的拥有某个类的元素时可知直接调用这个函数
      function getByClass(oParent,sClass) {
        var aEle=oParent.getElementsByTagName('*'); //获得这个父级元素下的所有标签
        var aResult=[];  //用来存储带有某个类的元素

        for(var i=0;i<aEle.length;i++){
          if(aEle[i].className==sClass){
            aResult.push(aEle[i]);
          }
        }
        return aResult;
      }
      var oUl=document.getElementById('ul3');
      var aBox=getByClass(oUl,'box');
      for(var i=0;i<aBox.length;i++){
        aBox[i].style.background='red';
      }