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使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
js面向对象的写法
Feb 19 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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网站基础优化方法小结
2008/09/29 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
用javascript操作xml
2006/11/04 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python中实现三目运算的方法
2015/06/21 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
Python常见的pandas用法demo示例
2019/03/16 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
自我评价是什么
2014/01/04 职场文书
校园安全教育广播稿
2014/02/17 职场文书
政风行风建设责任书
2014/07/23 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
先进员工事迹材料
2014/12/20 职场文书
单位推荐信范文
2015/03/27 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书