原生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的狀況，出現報錯；