<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. php url 伪静态

    手册上说:   'PATH_INFO'    包含由客户端提供的.跟在真实脚本名称之后并且在查询语句(query string)之前的路径信息,如果存在的话.例如,如果当前脚本是通过 URL http ...

  2. 简单三段式状态机实验3-Sequence Detect(序列检测)

    1.序列检测器的逻辑功能描述:序列检测指的就是将一个指定的序列从数字码流中识别出来.本例中,我们将设计一个"10010”序列的检测器.设x_in为数字码流输入,z_out为检出标记输出,高电 ...

  3. Python之路：堡垒机实例以及数据库操作

    一.堡垒机前戏 开发堡垒机之前,先学习Python的paramiko模块,该模块基于SSH用于连接远程服务器并执行相关操作. SSHClient 用于连接远程服务器并执行基本命令 基于用户名密码连接: ...

  4. PAT (Advanced Level) 1017. Queueing at Bank (25)

    简单模拟. #include<iostream> #include<cstring> #include<cmath> #include<algorithm&g ...

  5. [算法] kmp实现

    字符串查找是经典场景,也是面试中最常见的一道题. 说来惭愧,毕业3年了,才明白了kmp算法的实现,以前一直以为这类算法是基础,工作中中不会碰到[也的确没有碰到过...] 但是,对这些基本算法结构的理解 ...

  6. Apriori算法第二篇----详细分析和代码实现

    1 Apriori介绍 Apriori算法使用频繁项集的先验知识,使用一种称作逐层搜索的迭代方法,k项集用于探索(k+1)项集.首先,通过扫描事务(交易)记录,找出所有的频繁1项集,该集合记做L1,然 ...

  7. hibernate--ID生成策略--XML

    xml生成id, a) generator b) 常用4个: native, uuid, identity, sequence 1. 新建java项目,  引入hibernate, junit(use ...

  8. iOS开发概述UIkit动力学，讲述UIKit的Dynamic特性，UIkit动力学是UIkit框架中模拟真实世界的一些特性。

    转发:http://my.oschina.net/u/1378445/blog/335014 iOS UIKit动力学 Dynamics UIAttachmentBehavior 实现iMessage ...

  9. STM32之FreeRTOS

    STM32之FreeRTOS http://www.freertos.org/index.html http://www.freertos.org/a00090.html#ST http://www. ...

  10. curl调用openstack API总结

    curl命令是Linux下一个可以使用多种协议收发数据的工具,包括http协议.openstack的API接口都是URL地址:http://controller:35357/v3可以使用curl命令进 ...