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 全角转换实现代码
Jul 17 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 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 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
php 小乘法表实现代码
2009/07/16 PHP
php实现文件下载更能介绍
2012/11/23 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
js实现登录与注册界面
2017/11/01 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
Python交互环境下实现输入代码
2018/06/22 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
用Python写一个自动木马程序
2019/09/17 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
公共机构节能宣传周活动总结
2014/07/09 职场文书
员工考勤管理制度
2015/08/06 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
JS 基本概念详细介绍
2021/10/16 Javascript