getElementsByClassName 兼容性 - xiaoxiao2014－IT工程師數位筆記本

文章出處

getElementsByClassName是html5 新增加的一個類名。
該方法可以讓我們通過class屬性中的類名來訪問元素。不過該方法比較新，某些DOM樹還沒有，因此在使用中要當心。
由于只有較新的瀏覽器支持，為了彌補這一不足，可以使用已有的DOM方法來實現自己的getElementsByClassName.下邊這個函數使用各種新老瀏覽器。

 小提示：

getElementById--------------       id是單選的，是getElement

getElementsByClassName-----\     是可以復用的，是getElements

getElementsByTagName-------/

DOM樹中最常用的三個獲取元素的方法，前邊的getElement是不同的。記著呦~~

/*node 是dom樹的搜索起點  classname 是要搜索的類名*/
function getElementsByClassName(node,classname){
    if(node.getElementsByClassName){
        return node.getElementsByClassName(classname);
    }else{
        var results = new Array();
        var elems = node.getElementsByTagName("*");
        for(var i=0;i<elems.length;i++){
            console.log(elems[i].ClassName);
            if(elems[i].ClassName.indexOf(classname)!=-1){
                results[results.length] = elems[i];
            }
        }
        return results;
    }
}
/*用法*/
var shopping = document.getElementById('shop');
var shoplist = getElementsByClassName(shoplist,'list');

/*如果不知道id,id全局dom搜索的話*/
getElementsByClassName(document,'list');

使用方法

html

       <ul class="clear home-footer">
              <li class="item">
                    <a href="index.html">
                        <p class="name" style="font-size: 16px;">租賃流程</p>
                    </a>
                </li>
                <li class="item">
                    <a href="apply.html">
                        <p class="name">預訂須知</p>
                    </a>
                </li>
                <li class="item">
                    <a href="javascript:void(0);">
                        <p class="name">服務網點</p>
                    </a>
                </li>
                <li class="item item-mb">
                    <a href="rank.html">
                        <p class="name">用戶反饋</p>
                    </a>
                </li>
            </ul>
  <script>
　　　var re_node = getElementsByClassName(document,'name');
     for(var j=0;j<re_node.length;j++){
    　　var rec_style = re_node[j].innerText;
   　　 console.log(rec_style);
　　 }
 </script>