js原生封装getClassName()方法-ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素
<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;
js原生封装getClassName()方法-ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素的更多相关文章
- 基于js原生封装的点击显示完整文字
基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...
- Node.js原生及Express方法实现注册登录原理
由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...
- JS原生Date类型方法的一些冷知识
ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...
- js jq封装ajax方法
json文本格式 { "userInfo":[ {name:"admin",password:"123"}, {name:"adm ...
- js原生封装自定义滚动条
/* * @Author: dothin前端 * @Date: 2015-11-21 00:12:15 * @Last Modified by: dothin前端 * @Last Modified t ...
- Js原生封装选项卡组件
class MyTab extends HTMLElement{ //创建一个类名MyTab constructor(){ //构造函数 super(); //指向父类构造函数,必须要有的 const ...
- js原生函数一些封装
这是一些js原生封装的函数,主要是为了兼容IE浏览器,如下 获取css样式 function getStyle(ele, prop) { if(window.getComputedStyle) { r ...
- js多种去重的方法总结
第一种是比较常规的方法 思路: 1.构建一个新的数组存放结果 2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比 3.若结果数组中没有该元素,则存到结果数组中 Array.pro ...
- Chrome JS内存泄漏排查方法(Chrome Profiles)
原文网址:http://blog.csdn.net/kaitiren/article/details/19974269 JS内存泄漏排查方法(Chrome Profiles) Google Ch ...
随机推荐
- HDU 2485 Destroying the bus stations
2015 ACM / ICPC 北京站 热身赛 C题 #include<cstdio> #include<cstring> #include<cmath> #inc ...
- phpstorm9如何配置interpreter
找到php.exe的路径. 把php.exe 放进去就ok了
- Android Studio的使用(三)--包不分级、修改包名
1.如果不喜欢将包逐级展开的话,可以将每一个包名都完整展现出来,只需要勾选Flatten Packages. 2.修改包名 3.填写新的包名 4.点击确认
- Fragmen和Activity之间的通信--接口和实现的分离(转)
Fragmen和Activity之间的通信--接口和实现的分离(转) 分类: Android平台 在平板的开发过程中通常都会采用多个Fragment的实现方式,通常有一个为list的Fragm ...
- C#设置word段落首行缩进为0
PublicVar.m_WordApp.Selection.ParagraphFormat.CharacterUnitFirstLineIndent = ; PublicVar.m_WordApp.S ...
- 计算机学院大学生程序设计竞赛(2015’12) 1008 Study Words
#include<cstdio> #include<cstring> #include<map> #include<string> #include&l ...
- 打印等腰三角形javascript
<html> <head> <script type="text/javascript"> var n=4;//层数 for(var i=1; ...
- Application Fundamentals
Application Fundamentals 署名:译言biAji 链接:http://developer.android.com/guide/topics/fundamentals.html 应 ...
- linux usb installer
其实很简单,手册上有,cp debian....iso /dev/sdc,但是要把sdc上的分区删掉了先. This will only work if it is a hybrid ISO cont ...
- Laravel Eloquent get获取空的数据问题
在用laravel框架来获取数据,若数据不存在时,以为会返回空,其实不是的,其实是一个 collection 值,会返回如下: object(Illuminate\Database\Eloquent\ ...