原生JS編寫getByClass、addClass、removeClass、hasClass

前言：

　　年后換了工作，在現在的公司寫交互主要使用JS原生；剛剛入門前端的時候寫交互一直用的原生JS，雖然用的不怎么樣。后來去之前的公司之后，leader主張把jQuery用好，JS原生自然就熟練了；一路下來，jQuery用的比較熟練了，但是原生JS反而退步了，很久沒用，有的東西都有點手生了；現在的公司用原生JS也挺好的，感覺現在很多新的技術也都基於JS原生；

　　做了兩個項目，其中對class的DOM操作挺多的，在網上看了很多資料，在別人的基礎上總結封裝了幾個經常用到的函數：getByClass、addClass、removeClass、hasClass；

　　原理看看代碼，如果不懂看看注釋也就沒什么大問題。但是，有時候原理看懂了，自己不動手去做一下，就不會發現自己的問題；容易看懂，但是自己不會寫；所以還的多動手~

　　下面是幾個函數具體的代碼：

//獲取class
function getByClass(oParent, sClass){   
    if(oParent.getElementsByClassName){
        return oParent.getElementsByClassName(sClass);
    }else{
        var res = [];
        var re = new RegExp(' ' + sClass + ' ', 'i')
        var aEle = oParent.getElementsByTagName('*');
        for(var i = 0; i < aEle.length; i++){
            if(re.test(' ' + aEle[i].className + ' ')){
                res.push(aEle[i]);
            }
       }
    return res;
    }
}

//增加class
function addClass(obj,cls) {
    var obj_class=obj.className,//獲取class的內容；
    blank = ( obj_class != '' ) ? ' ' : '';//判斷獲取的class是否為空，如果不為空，則添加空格；
    added = obj_class + blank + cls;//組合原來的class和需要添加的class，中間加上空格；
    obj.className = added;//替換原來的class；
}

//移除class
function removeClass(obj,cls){
    var obj_class = '' + obj.className + '';//獲取class的內容，並在首尾各加一個空格；'abc    bcd' -> ' abc    bcd '
    obj_class = obj_class.replace(/(\s+)/gi,' ');//將多余的空字符替換成一個空格；' abc    bcd ' -> ' abc bcd '
    removed = obj_class.replace(' '+cls+' ',' ');//在原來的class，替換掉首尾加了空格的class  ' abc bcd ' -> 'bcd '
    removed = removed.replace(/(^\s+)|(\s+$)/g,'');//去掉首尾空格；'bcd ' -> 'bcd'
    obj.className = removed;//替換原來的class；
}

//判斷是否存在class
function hasClass(obj,cls){
    var obj_class = obj.className,//獲取class的內容；
    obj_class_lst = obj_class.split(/\s+/);//通過split空字符將cls轉換成數組
    x = 0;
    for(x in obj_class_lst){
        if ( obj_class_lst[x] == cls ) {
            return true;
        }
    }
    return false;
}

　　注：1.還是得在工作項目、學習中不斷的積累這些經驗，經常用到的東西自己封裝一個庫比較方便；

　　　　2.這些函數最好放在頁面底部，特別是getByClass;因為根據頁面的加載順序，會先加載JS，如果寫在body前面，會先運行getByClass，后面的內容還沒加載，就會出現找不到class的情況，出現報錯；