js获取class的所有元素

 更新时间:2013年03月28日 15:03:51   作者:   我要评论
ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素。

复制代码 代码如下:

<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>


注意getElementsByClassName和getElementsByTagName都有s;

js中不能用int a=1;要用var a=1;

相关文章

  • Javascript 颜色渐变效果的实现代码

    Javascript 颜色渐变效果的实现代码

    在搭建博主博客的时候,寻思着做一些效果,看到菜单,就想是不是可以做一下颜色的渐变,增加一点动态的感觉。有个jquery的插件,效果相当不错,不过博主还是打算自立更生写一下,看看能不能实现
    2013-10-10
  • javascript 实现滚动效果代码整理

    javascript 实现滚动效果代码整理

    javascript 实现滚动效果代码整理,需要的朋友可以参考下。
    2010-03-03
  • js实现图片360度旋转

    本文主要介绍了js实现图片360度旋转的思路与方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • d3.js实现立体柱图的方法详解

    d3.js实现立体柱图的方法详解

    这篇文章主要给大家介绍了利用d3.js实现立体柱图的方法,文中给出了详细的介绍和示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-04-04
  • 关于webpack代码拆分的解析

    关于webpack代码拆分的解析

    本篇文章主要介绍了关于webpack代码拆分的解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JS事件绑定的常用方式实例总结

    JS事件绑定的常用方式实例总结

    这篇文章主要介绍了JS事件绑定的常用方式,结合实例形式总结分析了javascript三种常见的事件绑定原理与操作技巧,需要的朋友可以参考下
    2019-03-03
  • 学习JavaScript图片预加载模块

    学习JavaScript图片预加载模块

    这篇文章主要介绍了js实现图片预加载的方法,内容很详细,带领大家全面认识js图片预加载模块,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • React操作真实DOM实现动态吸底部的示例

    React操作真实DOM实现动态吸底部的示例

    本篇文章主要介绍了React操作真实DOM实现动态吸底部的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • js触发asp.net的Button的Onclick事件应用

    js触发asp.net的Button的Onclick事件应用

    由于asp.net采用的是事件驱动模式,所以默认用户按回车并没有触发按钮的onclick事件。用户按回车也不是没有提交表单,通过httpwath可以看到,实际上页面表单是提交到了form下的action页面,只不过没有触发onclick事件而已,感兴趣的朋友可以了解下,或许对你有所帮助
    2013-02-02
  • js正则表达式匹配数字字母下划线等

    js正则表达式匹配数字字母下划线等

    本文给大家分享的是使用正则表达式检测只含有汉字、数字、字母、下划线等示例,非常的简单实用,这里推荐给大家,有需要的小伙伴参考下。
    2015-04-04

最新评论