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扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
JavaScript多线程详解
Aug 12 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
微信小程序实现签字功能
Dec 23 Javascript
Js跳出两级循环方法代码实例
Sep 22 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 flv视频时间获取函数
2010/06/29 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
js同源策略详解
2015/05/21 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
python中bisect模块用法实例
2014/09/25 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
Python实现快速计算词频功能示例
2018/06/25 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
个性大学生自我评价
2013/12/04 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
安全生产实施方案
2014/02/23 职场文书
可口可乐广告词
2014/03/20 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
合同补充协议书
2016/03/24 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python