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 相关文章推荐
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
python检测lvs real server状态
2014/01/22 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
单位绩效考核方案
2014/05/11 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
Python Socket编程详解
2021/04/25 Python
Flink 侧流输出源码示例解析
2022/09/23 Servers