關於HTML中，如何根據元素的className獲取元素？

　　getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持
　　我們知道，原生的方法，是getElementById()和getElementsByTagName()，這兩個不會有兼容問題，但是遇到class的問題還是沒法解決。所以這里總結兩種封裝方法，可以用它們來獲取指定的class元素。當然，對於現代瀏覽器開發，還可以使用querySelector()和querySelectorAll()，他們的功能更加強大。

1.數組遍歷的方法：

function getByClass(sClass,oParent){
        
    var parent = oParent || document;
    var aEles = parent.getElementsByTagName('*');
    var arr = [];
    
    for(var i=0; i<aEles.length; i++){
        
        var aClass = aEles[i].className.split(' ');
        
        for(var j=0; j<aClass.length; j++){
            if(aClass[j] == sClass){
            
                arr.push(aEles[i]);
                
            }    
        }
    }
    return arr;
}

 

2.正則匹配的方法

function getElementsByClassName(oParent, sClass){
    var aEle = oParent.getElemnetsByTagName('*');
    var result = [];
    var re = new RegExp('\\b' + sClass + '\\b', 'i');
    
    for(var i=0; i<aEle.length; i++){
        if(re.test(aEle[i].className)){
            result.push(aEle);    
        }    
    }
    return result;
}

　　最后，值得一提是，前端頁面實現中，性能的影響往往出現在DOM的操作中。此外，還要注意元素的回流和重繪問題。