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 相关文章推荐
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
js获取微信版本号的方法
May 12 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
微信小程序实现多选功能
Nov 04 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
JavaScript实现英语单词题库
Dec 24 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验证是否是md5编码的简单代码
2014/04/01 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python实现多进程代码示例
2018/10/31 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
python实现用户名密码校验
2020/03/18 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
物流专业大学生的自我鉴定
2013/11/13 职场文书
教师现实表现材料
2014/02/14 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
土建施工员岗位职责
2015/04/11 职场文书
企业团队精神心得体会
2016/01/19 职场文书
《桂花雨》教学反思
2016/02/19 职场文书