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 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
js document.write()使用介绍
Feb 21 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
jquery实现页面加载效果
Feb 21 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
理解JavaScript中的对象
Aug 25 Javascript
JavaScript手写数组的常用函数总结
Nov 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
js 设置选中行的样式的实现代码
2010/05/24 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
关于python中的xpath解析定位
2020/03/06 Python
python新手学习可变和不可变对象
2020/06/11 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
心得体会开头
2014/01/01 职场文书
施工班组长岗位职责
2014/01/05 职场文书
女方回门宴答谢词
2014/01/14 职场文书
大学校运会广播稿
2014/02/03 职场文书
保护环境建议书
2014/03/12 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
西游记读书笔记
2015/06/25 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
Python连续赋值需要注意的一些问题
2021/06/03 Python