<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的所有元素的更多相关文章

  1. 基于js原生封装的点击显示完整文字

    基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...

  2. Node.js原生及Express方法实现注册登录原理

    由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...

  3. JS原生Date类型方法的一些冷知识

    ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...

  4. js jq封装ajax方法

    json文本格式 { "userInfo":[ {name:"admin",password:"123"}, {name:"adm ...

  5. js原生封装自定义滚动条

    /* * @Author: dothin前端 * @Date: 2015-11-21 00:12:15 * @Last Modified by: dothin前端 * @Last Modified t ...

  6. Js原生封装选项卡组件

    class MyTab extends HTMLElement{ //创建一个类名MyTab constructor(){ //构造函数 super(); //指向父类构造函数,必须要有的 const ...

  7. js原生函数一些封装

    这是一些js原生封装的函数,主要是为了兼容IE浏览器,如下 获取css样式 function getStyle(ele, prop) { if(window.getComputedStyle) { r ...

  8. js多种去重的方法总结

    第一种是比较常规的方法 思路: 1.构建一个新的数组存放结果 2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比 3.若结果数组中没有该元素,则存到结果数组中 Array.pro ...

  9. Chrome JS内存泄漏排查方法(Chrome Profiles)

     原文网址:http://blog.csdn.net/kaitiren/article/details/19974269 JS内存泄漏排查方法(Chrome Profiles)   Google Ch ...

随机推荐

  1. Android -----paint cap join 理解 ，paint画笔形状设置

    引自:http://www.2cto.com/kf/201501/370215.html 网上查了很多资料,对paint的里面的枚举类cap join讲的不是很透彻.在这里自己做一个比较深入的研究. ...

  2. android脚步---简单图片浏览器改变图像透明度

    图片浏览器调用ImageView的setAlpha方法来实现改变图片透明度. main.xml文件如下:三个按钮,两个imageview,,界面定义了两个ImageView,一个是显示局部图片的Ima ...

  3. Android安全讲座第九层(二) 内存dump

    近来android上越来越多的应用对自身的保护机制加强了重视,主要表现在几个方面. 1 dex加壳 2 so加壳 3 dex藏在so中,在适当的时候释放. 这是技术上一个进步,并且还有一些专业的公司提 ...

  4. ASP.NET WebService

    一.WebService:WebService是以独立于平台的方式,通过标准的Web协议,可以由程序访问的应用程序逻辑单元. (1)应用程序逻辑单元:web服务包括一些应用程序逻辑单元或者代码.这些代 ...

  5. dedecms 的这个dede:arclist里怎么调用全局变量？

    将{dede:global.cfg_templets_skin/} 写为 [field:global.cfg_templets_skin/] 即可.

  6. LINQ to SQL语句对应SQL的实现

    LINQ to SQL语句(1)之Where LINQ to SQL语句(2)之Select/Distinct LINQ to SQL语句(3)之Count/Sum/Min/Max/Avg LINQ ...

  7. Selenuim+Python之元素定位总结及实例说明

    网页自动化最基本的要求就是要定位到各个元素,然后才能对该元素进行各种操作(输入,点击,清除,提交等),所以笔者今天来总结下Selenuim+Python最基本的几种定位方式及实例说明,希望能帮助到大家 ...

  8. Android开发学习资源

    https://developer.android.google.cn/training/index.html

  9. 常用HQL集锦

    1.根据ID查询某"一个"实体类 方法1: String hql = "From ClassEntity as c where c.id=?"; ClassEn ...

  10. PHP 对MySQLI预处理的包装

    mysql 类 <?php class Mysql { private static $instance; private $link; private $query; private $stm ...