DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js獲取class的所有元素
js獲取class的所有元素
編輯:關於JavaScript     

復制代碼 代碼如下:
<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;

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved