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 相关文章推荐
js 幻灯片的实现
Dec 06 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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里的JS打印函数
2006/10/09 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
基于empty函数的输出详解
2013/06/17 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
extjs render 用法介绍
2013/09/11 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
python连接字符串的方法小结
2015/07/13 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
python dict如何定义
2020/09/02 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
韩语专业本科生求职信
2013/10/01 职场文书
自主招生自荐信
2013/12/08 职场文书
材料化学专业求职信
2014/07/15 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
催款通知书范文
2015/04/17 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android