框架设计续集（五）

==之前的选择器函数都是基本选择器，怎么实现组合，兄弟，后代，过滤等等==
<!--组合选择器的实现-->

/**
 * Created by Administrator on 2017/11/26.
 */
//假设context是一个选择器字符串
//只需要将选择器字符串转化为dom伪数组
//需要改变得就是在获取元素的上下文做相应的更改


/*对浏览器能力检测模块B*/
var support ={};
support.getElementsByClassName = (function(){
    var isExist = !!document.getElementsByClassName;
    if(isExist && typeof document.getElementsByClassName == "function" ){
        var  oDivParent = document.createElement("div"),
            oDivChild = document.createElement("div");
        oDivChild.className = "cc";
        oDivParent.appendChild(oDivChild);
        return  oDivParent.getElementsByClassName("cc")[0] ===oDivChild;
    }
    return false

})();

//检测浏览器对字符串是否有trim方法,只是去除字符串首尾的字符，对于中间的空格不处理
support.trim = (function(str){
    var isExist = !!String.prototype.trim;
    if(isExist){
        return str.trim()
    }else{
        return str.replace(/^s+|s+$/g,"")
    }
})
/*对浏览器能力检测模块E*/
/*遍历for(){}B*/
function each(arr,fn){
    for(var i=0;i<arr.length;i++){
        if(fn.call(arr[i],i,arr[i])===false){
            break
        }
    }
}
/*遍历for(){}E*/

/*单个的获取元素的方法B*/
function getTag(tag,context,results){
    results = results || [];
    context = context ||document;
    results.push.apply(results,context.getElementsByTagName(tag));
    return results
}

function getID(id,results){
    results = results || [];
    results.push(document.getElementById(id));
    return results
}

function getClass(classname,context,results){
    results = results || [];
    context = context ||document;
    var arr, i,reg;
    if(support.getElementsByClassName){
        results.push.apply(results,document.getElementsByClassName(classname));
    }else{
        arr = context.getElementsByTagName("*");
        for( i= 0;i<arr.length;i++){
            reg = new  RegExp("\b"+classname+"\b");
            if(reg.test(arr[i].className)){
                results.push(arr[i])
            }
        }
    }
    //console.log(results)
    return results
}
/*单个的获取元素的方法E*/

/*基本选择器的实现 B*/
function getElem(selector,context,results){
    results = results || [];
    context = context ||document;
    var regE = /^(?:#([w-]+)|.([w-]+)|([w]+)|(*))$/,
        ex = regE.exec(selector);
    if(ex){
        //在context不传参数时，对document的情况进行转化，
        if(context.nodeType){
            context = [context]
        }
        if(typeof context == "string"){
            //将选择器字符串转化为dom数组,加上if判断判断的目的是下边函数递归，需要跳出
            context = getElem(context);
        }
        each(context,function(i,v){
            if(ex[1]){
                getID(ex[1],results);
            }else if(ex[2]){
                getClass(ex[2],v,results);
            }else if(ex[3]){
                getTag(ex[3],v,results)
            }else if(ex[4]){
                getTag("*",v,results)
            }
        })

    }
    return results;
}
/*基本选择器的实现 E */


/*组合选择器的实现 B */
/*怎么实现组合选择器eg:(".con",".box")
为了实现代码的服用，重新定义一个函数*/

function select (selector,context,results){
    results = results || [];
    var newselector = selector.split(",");
    //因为传进来的选择器字符串两端可能有空格，为了防止出错，将其两端的空格去掉
   each(newselector,function(i,v){
       //遍历，分别调用基本选择器函数，追加到results数组中
       results.push.apply(results,getElem(support.trim(v),context))
   });
    return results
}

/*组合选择器的实现 E*/



eg：

<div class="con" id="con">
    <div class="box box1">123</div>
    <p class="box1">pppppppppppppppp</p>
    <h4>我是大标题</h4>
</div>
<p class="box">我是body下的p标签</p>
<body>
<script src="js/common1.3.js"></script>
<script>
    each(select(".box,h4",".con"),function(i,v){
        this.style.background = "pink";
    })
</script>

//结果就是"".con"下的“.box”和“h4”背景变色