原生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的情况，出现报错；