<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. （转）windows上virtualenv 安装及使用

    [注意]要在某个含有空格的目录下面创建virtualenv环境,就要安装 win32api . 原文地址:http://blog.csdn.net/liuchunming033/article/det ...

  2. 使用MyEclipse构建MAVEN项目 - 我的漫漫程序之旅 - BlogJava

    body { font-family: Microsoft YaHei UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-ser ...

  3. Delphi XE7,Rad Studio XE7 官方下载（附Delphi XE7破解），更新Update1(转)

    源:http://blog.csdn.net/maxwoods/article/details/39024525

  4. Socket.io官方聊天室DEMO的学习笔记

    照着Socket.io官方的聊天室代码敲了一遍,遇到了一个奇怪的问题: 每次点击SEND按钮的时候,都会重新刷新页面. 在点击页面的一瞬间,看到了正在加载jquery的提示, 然后以为是jquery用 ...

  5. CSS实现单行、多行文本溢出显示省略号

    单行显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap;多行显示省略号 display: -webkit-box; ...

  6. js - object的属性操作

    视频学习地址: http://www.imooc.com/video/6002 原文PPT下载地址: http://img.mukewang.com/down/54c5ec1a000141f10000 ...

  7. ZOJ 3941 Kpop Music Party

    先把能合并的区间都合并起来. 考虑最裸的贪心策略,从左到右一段一段的取. 但是,这样会有错,错在没有考虑每段区间选取最后一个点. 因为N只有10,所以枚举一下哪些区间最后一个点会被选择,然后按照最裸的 ...

  8. 控制流之continue

    continue语句continue语句被用来告诉Python跳过当前循环块中的剩余语句,然后 继续 进行下一轮循环.使用continue语句~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  9. LPC2478内存布局以及启动方式

    LPC2478 是NXP公司推出的一款基于APR7TDMI-S的工控型MCU,内置RAM与flash,同时提供外部扩展flash和ram接口,拥有LCD控制器,其内存布局如下所示 其中Flash高达5 ...

  10. iOS调用另一个程序

    在 iOS 里,程序之间都是相互隔离,目前并没有一个有效的方式来做程序间通信,幸好 iOS 程序可以很方便的注册自己的 URL Scheme,这样就可以通过打开特定 URL 的方式来传递参数给另外一个 ...