javascript中通過className靈活查找元素 例如我們要把根據class來進行修改樣式

一、背景：一個表單中，要修改一些li中有class=box的樣式，將它的background設置為red紅色。
一般的做法是我們可以先找到父級元素 ，然后由父級元素找到所有相關tagName，最后，來一個if判斷，如果class屬性為box，則修改之

 var oUl = document.getElementById("ul1");                                  //加上它的上級元素，可以避免我們篩選出許多無用的節點出來
var aLi = oUl.getElementsByTagName("li");

html代碼：

 <ul id="ul1">
           <li class="box"></li>           
           <li></li>
           <li class="box"></li>
           <li></li>
           <li class="box"></li>
 </ul>

 

一般做法的代碼:

     <script>
              var oUl = document.getElementById("ul1");        //加上它的上級元素，可以避免我們篩選出許多無用的節點出來
              var aLi = oUl.getElementsByTagName("li");
              var i = 0;
              
              for(i =0; aLi.length; i++){
                     if(aLi[i].className == "box"){
                            aLi[i].style.background = "#FF9900";
                     }
              }              
       </script>

 

為了代碼重用，將其封裝成一個小函數，存入代碼庫，以便以后可以使用。
思路：查找className需要兩個參數，一個數父級元素、一個是指定的class。通過父級元素，可以找到父級元素下的所有元素節點，有了這些元素節點呢，我們就可以獲取到父級元素下的所有元素，最后通過if判斷，並結合循環，把這些元素的class是指定值的遍歷出來。
通過className靈活查找元素    函數封裝版

<!--
           作者：[e-mail]
           時間：2014-04-13
           描述：通過className靈活查找元素    函數封裝版
       -->
       <script>
              function getByClass(oParent,sClass){
                     var aEle = oParent.getElementsByTagName('*');      //獲取父級元素下的所有元素
                     var aResult = new Array();
                     for(var i =0; i<aEle.length; i++){
                           if(aEle[i].className == sClass){
                               aResult.push(aEle[i]);
                           }
                     }
                     return aResult;
              }
               
              window.onload = function(){
                  var oUl = document.getElementById('ul1');
                  var aBox = getByClass(oUl,'box');
                  //獲取到所有的class=box的屬性后，進行修改 你想要的樣式
                  for(var i =0; i<aBox.length; i++){
                         aBox[i].style.background = 'red';
                         
                  }
              }
              
       </script>