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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
javascript实现简易聊天室
Jul 12 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环境――Appserv
2006/12/13 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python安装本地whl的实例步骤
2019/10/12 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
C#怎么让一个窗口居中显示?
2015/10/20 面试题
师范生实习的个人自我鉴定
2013/10/20 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
2015年共青团工作总结
2015/05/15 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers