js获取class的所有元素
<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;
相关文章
这篇文章主要介绍了微信小程序定义和调用全局变量globalData的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同2014-08-08
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
在新浪微博首页看到每条微博后边显示的时间并不是标准的年-月-日格式，而是经过换算的时间差，如：发表于5分钟前、发表于“2小时前”，比起标准的时间显示格式，貌似更加直观和人性化2014-04-04
这篇文章主和要介绍了fetch 使用及如何接收JS传值,文中给大家提到了fetch基本使用方式和接收js传值的使用方式,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了使用Typescript开发微信小程序的步骤详解,本文分步骤通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
一文让你彻底搞清楚javascript中的require、import与export
这篇文章主要给大家介绍了关于javascript中require、import与export的相关资料，文中通过示例代码介绍的非常详细，对打击大的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-09-09
在小程序中,有默认的图标icon组件,但你会发现它的图标样式很少,可能很多时候并不能满足我们的需求,所以这篇文章主要给大家介绍了关于微信小程序引入外部icon(阿里巴巴矢量图标)的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了JS中的算法与数据结构之常见排序（Sort）算法,结合实例形式详细分析了js常见排序算法中的冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序等算法相关实现技巧与操作注意事项,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了javascript实现简单的鼠标拖动效果,实例分析了javascript鼠标拖动效果的相关要点与实现技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章总结了JS格式化数字（每三位加逗号）的几种方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
最新评论