Hoverlees' Blog

为了尽量实现浏览器兼容，同时又能方便进行节点定位，我就写了这两个函数，对于支持querySelector的浏览器会调用自带的querySelector,如果浏览器不支持，就调用自己实现的函数。

此函数可能有些bug，不过现在我还没遇到，有人要是遇到了给个留言我有空就去修掉。

//支持 #id|.classname|tagname|tagname.classname|tagname#id四种，如果要多层筛选，请重复调用
function querySelectorAll(node,selector){
    if(typeof(document.querySelectorAll)!='undefined'){
        return node.querySelectorAll(selector);
    }
    var tname;
    var citems;
    function findElementsByClassNameInner(n,className){
        var items= n.children;
        for(var i=0;i<items.length;i++){
            if(items[i].className==className){
                citems.push(items[i]);
            }
            findElementsByClassNameInner(items[i],className);
        }
        return citems;
    }
    function findElementsByIDInner(n,id){
        var items= n.children;
        for(var i=0;i<items.length;i++){
            if(items[i].id==id){
                citems.push(items[i]);
            }
            findElementsByIDInner(items[i],id);
        }
        return citems;
    }
    if(selector.charAt(0)=='.'){
        tname=selector.substring(1);
        citems=new Array();
        var items=findElementsByClassNameInner(node,tname);
        return items;
    }
    else if(selector.charAt(0)=='#'){
        var id=selector.substring(1);
        citems=new Array();
        var items=findElementsByIDInner(node,id);
        return items;
    }
    else if((r=selector.match(/(\w+)\.(\w+)/))!=null){
        tagName=r[1].toLowerCase();
        className=r[2];
        citems=new Array();
        var titems=findElementsByClassNameInner(node,className);
        var items=new Array();
        for(i=0;i<titems.length;i++){
            if(titems[i].tagName && titems[i].tagName.toLowerCase()==tagName){
                items.push(titems[i]);
            }
        }
        return items;
    }
    else if((r=selector.match(/(\w+)#(\w+)/))!=null){
        tagName=r[1].toLowerCase();
        id=r[2];
        citems=new Array();
        var titems=findElementsByIDInner(node,id);
        var items=new Array();
        for(i=0;i<titems.length;i++){
            if(titems[i].tagName && titems[i].tagName.toLowerCase()==tagName){
                items.push(titems[i]);
            }
        }
        return items;
    }
    else{
        var items= node.getElementsByTagName(selector);
        return items;
    }
}
//支持 #id|.classname|tagname|tagname.classname|tagname#id四种，如果要多层筛选，请重复调用
function querySelector(node,selector){
    if(node==null) return null;
    if(typeof(document.querySelector)!='undefined'){
        return node.querySelector(selector);
    }
    var items=querySelectorAll(node,selector);
    return items.length==0 ? null:items[0]
}

//调用示例
window.onload=function(){
    //var li=document.querySelectorAll("#Test li.a1");
    var test=querySelector(document.body,"#Test");
    var li=querySelectorAll(test,"li.a1");
    alert(li.length);
}

Continue reading “为IE6写的querySelector”

最近加入uc做前端工作，参与做了这个HTML5的二人麻将，有兴趣的朋友可以去玩玩。