<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. FACE++学习一、detect接口

    /detection/detect 描述 检测给定图片(Image)中的所有人脸(Face)的位置和相应的面部属性 目前面部属性包括性别(gender), 年龄(age), 种族(race), 微笑程 ...

  2. CentOS下自动登陆root帐户

    1 vi /etc/pam.d/gdm 把 auth required …… root quiet这行注释掉 2 vi /etc/pam.d/gdm-passwd 同上 3 vi /etc/gdm/c ...

  3. VS下载地址

    http://www.iplaysoft.com/vs2015.html   Microsoft Visual Studio(简称VS)是美国微软公司的开发工具包系列产品.Visual Studio ...

  4. Struts2--Dynamic Result动态结果集

    ${r} : 表示配置文件xml可以读取action的valuestack的内容 1. jsp显示文件: <body> 动态结果 一定不要忘了为动态结果的保存值设置set get方法 &l ...

  5. Andriod学习笔记 - 参考

    Andriod学习笔记 - 参考 自定义实现圆形播放进度条(android,飞一般的感觉) 盘点Android开发者必备的十大开发工具

  6. C++------------typedef 函数指针类型定义

    摘要bycrazyhacking:        typedef 是定义了一种"函数指针"类型,可以再声明很多变量.函数指针的定义是定义了一个变量. int max(int x,i ...

  7. Spring的5种事物配置方式

    Spring事务配置的五种方式 前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只 ...

  8. SQL SERVER 2008 Hierarchyid数据类型

    以往我们在关系数据库中建立树状结构的时候,通常使用ID+ParentID来实现两条纪录间的父子关系.但这种方式只能标示其相对位置.解决这类问题在SqlServer2005出现之前通常是采用游标来操作, ...

  9. HDU 5677 ztr loves substring

    Manacher+二维费用多重背包 二进制优化 这题是一眼标算....先计算出每个长度的回文串有几种,然后用二维费用的多重背包判断是否有解. 多重背包做的时候需要二进制优化. #include< ...

  10. PHP的Cookie、Session和跟Laravel相关的几点了解

    这两天通过对Cookie和Session的查找和了解,网上关于它们两个的基础知识点都是差不多的,也收藏了几篇不错的博客,同时自己做了些实验后,有了以下几点了解: 1.setcookie 这里有三个地方 ...