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限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
javascript实现表单验证
Jan 29 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
基于JavaScript实现留言板功能
Mar 16 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 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文件上传的简单实例
2013/10/19 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
VBScript版代码高亮
2006/06/26 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
Python异常学习笔记
2015/02/03 Python
Python数据类型学习笔记
2016/01/13 Python
python安装gdal的两种方法
2019/10/29 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
django迁移文件migrations的实现
2020/03/31 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
深入了解Python enumerate和zip
2020/07/16 Python
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
机械电子工程专业推荐信范文
2013/11/20 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
见习期自我鉴定
2014/01/31 职场文书
设备管理实施方案
2014/05/31 职场文书
小区推广策划方案
2014/06/06 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
安全检查汇报材料
2014/12/26 职场文书