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实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
JavaScript数组方法总结分析
May 06 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 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
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
JavaScript静态的动态
2006/09/18 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
用python代码做configure文件
2014/07/20 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python实现简单登录验证
2016/04/13 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
理货员的岗位职责
2013/11/23 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
五好家庭事迹材料
2014/12/20 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS