js獲取class


  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;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM