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实现Table排序的方法
May 15 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
原生javascript如何实现共享onload事件
Jul 03 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/06/18 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python构造函数及解构函数介绍
2015/02/26 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
python3实现点餐系统
2019/01/24 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Python坐标线性插值应用实现
2019/11/13 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
全球度假村:Club Med
2017/11/27 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
党员学习十八大感想
2014/01/17 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
2015年复活节活动总结
2015/02/27 职场文书