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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 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 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
利用Python获取操作系统信息实例
2016/09/02 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
python调用c++传递数组的实例
2019/02/13 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
非功能性需求都包括哪些方面
2013/10/29 面试题
UNIX文件系统常用命令
2012/05/25 面试题
大学生入党自我鉴定
2013/10/31 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server