js获取class的所有元素


Posted in Javascript onMarch 28, 2013
<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 中的内存泄露模式
Aug 13 Javascript
动态添加js事件实现代码
Mar 12 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
js实现简单图片拖拽效果
Feb 22 Javascript
js导航菜单(自写)简单大方
Mar 28 #Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 #Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 #Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 #Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 #Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 #Javascript
自定义jQuery选项卡插件实例
Mar 27 #Javascript
You might like
PHP has encountered an Access Violation
2007/01/15 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
Python中操作符重载用法分析
2016/04/29 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
期末自我鉴定
2014/02/02 职场文书
银行服务感言
2014/03/01 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
十佳少年事迹材料
2014/12/25 职场文书
中秋联欢会主持词
2015/07/04 职场文书
党风廉政承诺书2016
2016/03/25 职场文书