js 通过class获取元素实例小结

2016-02-22    编辑:bluestart     点击(
今天来给大家介绍js 通过class获取元素实例,这里有两个实例,如果你有兴趣不防进入参考一下,非常不错的两个js通过class获取元素与属性的实例。

今天看百度-web前端开发工程师-笔试题,发现了一个自己长久以来忽视的问题。
曾经有同事用我写的代码去取元素,结果没取到。原因的话,我相信是因为她写的类名中有“-”,这个在正则中会被当作元字符来处理。所以代码可以像那个前端所写的那样:

 代码如下 复制代码

 var Tea = (function(){
    function getElementsByClassName(className,tag,parent){
        //".all" 是 DHTML www.111cn.net中的用法,当 tag 等于 "*" 时,
        //如果浏览器支持 ".all" 就用,否则,用标准DOM方法
        var allTags=(tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag);
        var matchingElements= new Array();
        //因为 '-' 是正则表达式中的元字符,而 className 中 '-' 是合法的,
        //所以,当把 className 写入正则表达式之前,要先转义 '-'
        className=className.replace(/-/g,"-");
        var regex=new RegExp("(^|)"+className+"(|$)");
        var element;
        for(var i=0;i<allTags.length;i++){
            element=allTags[i];
            if(regex.test(element.className)){
                matchingElements.push(element);
            }
        }
        return matchingElements;
    }
    return {
        getElementsByClassName : getElementsByClassName
    };
})();

群里面的99兄,告诉小弟说,现在一般不流行这样的匹配方式了,可以采用以下方式:

 代码如下 复制代码


   (' ' +className.toLowerCase() + ' ').indexOf(' ' +要判断的class+ ' ') !== -1

例2

 代码如下 复制代码


<html>
<head>
<script type="text/javascript">
window.onload = function()
{   var topMenus = getClass('li','topMenu');
    for(var i=0;i < topMenus.length; i++)
    {
        alert(topMenus[i].innerHTML);       
    }
}
function getClass(tagName,className) //获得标签名为tagName,类名className的元素
{
    if(document.getElementsByClassName) //支持这个函数
    {        return document.getElementsByClassName(className);
    }
    else
    {       var tags=document.getElementsByTagName(tagName);//获取标签
        var tagArr=[];//用于返回类名为className的元素
        for(var i=0;i < tags.length; i++)
        {
            if(tags[i].class == className)
            {
                tagArr[tagArr.length] = tags[i];//保存满足条件的元素
            }
        }
        return tagArr;
    }
}
 
</script>
</head>
<body>
<ul id="nav">
<li class="topMenu"><a href="#">这里全部是产品介绍</a>
    <ul class="subMenu">
        <li><a href="#">这里全部是产品1</a></li>
        <li><a href="#">这里全部是产品2</a></li>
        <li><a href="#">这里全部是产品3</a></li>
        <li><a href="#">这里全部是产品4</a></li>
        <li><a href="#">这里全部是产品5</a></li>
        <li><a href="#">这里全部是产品6</a></li>
    </ul>
</li>
<li class="topMenu"><a href="#">服务介绍</a>
    <ul class="subMenu">
        <li><a href="#">服务1</a></li>
        <li><a href="#">服务2</a></li>
        <li><a href="#">服务3</a></li>
        <li><a href="#">服务4</a></li>       
    </ul>
</li>
<li class="topMenu"><a href="#">成功案例</a>
    <ul class="subMenu">
        <li><a href="#">案例1</a></li>
        <li><a href="#">案例2</a></li>
        <li><a href="#">案例3</a></li>
        <li><a href="#">案例4</a></li>
    </ul>
</li>
<li class="topMenu"><a href="#">关于我们会找你的</a>
    <ul class="subMenu">
        <li><a href="#">我们会找你的1</a></li>
        <li><a href="#">我们会找你的2</a></li>
        <li><a href="#">我们会找你的3</a></li>
        <li><a href="#">我们会找你的4</a></li>
    </ul>
</li>
<li class="topMenu"><a href="#">这里会联系我们会找你的我们会找你的</a>
    <ul class="subMenu">
        <li><a href="#">这里会联系我们会找你的1</a></li>
        <li><a href="#">这里会联系我们会找你的2</a></li>
        <li><a href="#">这里会联系我们会找你的3</a></li>
        <li><a href="#">这里会联系我们会找你的4</a></li>
        <li><a href="#">这里会联系我们会找你的5</a></li>
        <li><a href="#">这里会联系我们会找你的6</a></li>
        <li><a href="#">这里会联系我们会找你的7</a></li>
    </ul>
</li>
</ul>
</body>
</html>