July 13, 2013 分类: DHTML     作者: hoverlees     留言: 发表

为了尽量实现浏览器兼容,同时又能方便进行节点定位,我就写了这两个函数,对于支持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);
}

下面是测试上面代码使用的HTML

<!DOCTYPE HTML>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8"/>
</head>
<body>
<div id="Test">
    <ul>
        <li class="a1">111</li>
        <li class="a1">111</li>
        <li class="a1">111</li>
        <li class="a1">111</li>
        <li>222</li>
        <li class="a1">111</li>
        <li class="a1">111</li>
        <li class="a1">111</li>
    </ul>
</div>
<div>
    <ul>
        <li class="a1">111</li>
        <li class="a1">111</li>
        <li class="a1">111</li>
        <li class="a1">111</li>
    </ul>
</div>
我来留个言

您的电子邮箱我一定会保密的哦!

昵称

邮箱

评论内容

快速链接
推荐文章
推荐标签
最新图片