js獲取class的所有元素
<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) //獲得標(biāo)簽名為tagName,類名className的元素
{
if(document.getElementsByClassName) //支持這個(gè)函數(shù)
{ return document.getElementsByClassName(className);
}
else
{ var tags=document.getElementsByTagName(tagName);//獲取標(biāo)簽
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="#">產(chǎn)品介紹</a>
<ul class="subMenu">
<li><a href="#">產(chǎn)品1</a></li>
<li><a href="#">產(chǎn)品2</a></li>
<li><a href="#">產(chǎn)品3</a></li>
<li><a href="#">產(chǎn)品4</a></li>
<li><a href="#">產(chǎn)品5</a></li>
<li><a href="#">產(chǎn)品6</a></li>
</ul>
</li>
<li class="topMenu"><a href="#">服務(wù)介紹</a>
<ul class="subMenu">
<li><a href="#">服務(wù)1</a></li>
<li><a href="#">服務(wù)2</a></li>
<li><a href="#">服務(wù)3</a></li>
<li><a href="#">服務(wù)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="#">關(guān)于我們</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="#">聯(lián)系我們</a>
<ul class="subMenu">
<li><a href="#">聯(lián)系1</a></li>
<li><a href="#">聯(lián)系2</a></li>
<li><a href="#">聯(lián)系3</a></li>
<li><a href="#">聯(lián)系4</a></li>
<li><a href="#">聯(lián)系5</a></li>
<li><a href="#">聯(lián)系6</a></li>
<li><a href="#">聯(lián)系7</a></li>
</ul>
</li>
</ul>
</body>
</html>
注意getElementsByClassName和getElementsByTagName都有s；
js中不能用int a=1;要用var a=1;
- js中設(shè)置元素class的三種方法小結(jié)
- js獲取某元素的class里面的css屬性值代碼
- javaScript給元素添加多個(gè)class的簡(jiǎn)單實(shí)現(xiàn)
- js通過(guò)元素class名字獲取元素集合的具體實(shí)現(xiàn)
- js選取多個(gè)或單個(gè)元素的實(shí)現(xiàn)代碼（用class）
- 基于原生js實(shí)現(xiàn)判斷元素是否有指定class名
- js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
- javascript通過(guò)class來(lái)獲取元素實(shí)現(xiàn)代碼
- js如何根據(jù)class獲取元素并且點(diǎn)擊元素詳解
相關(guān)文章
js 監(jiān)控iframe URL的變化實(shí)例代碼
下面小編就為大家?guī)?lái)一篇js 監(jiān)控iframe URL的變化實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
在TypeScript中,類型斷言用于告訴編譯器某個(gè)變量的類型,這在我們確定變量的類型比編譯器更準(zhǔn)確時(shí)非常有用,本文給大家分享了幾種TypeScript中使用類型斷言方式,需要的朋友可以參考下2023-09-09
js實(shí)現(xiàn)文字無(wú)縫向上滾動(dòng)
本文主要分享了js實(shí)現(xiàn)文字無(wú)縫向上滾動(dòng)的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
next.js?getServerSideProps源碼解析
這篇文章主要為大家介紹了next.js?getServerSideProps源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
深入理解requireJS-實(shí)現(xiàn)一個(gè)簡(jiǎn)單的模塊加載器
本篇文章主要介紹了深入理解requireJS-實(shí)現(xiàn)一個(gè)簡(jiǎn)單的模塊加載器，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了electron制作仿制qq聊天界面的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
JavaScript canvas實(shí)現(xiàn)鏡像圖片效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)鏡像圖片效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JS操作Cookie，包含了寫入和讀取及讀取value的值，適合新手朋友，感興趣的朋友可以參考下2013-10-10
javascript中全局對(duì)象的isNaN()方法使用介紹
全局對(duì)象的isNaN()方法通常用于檢測(cè) parseFloat() 和 parseInt() 的結(jié)果，下面為大家介紹下其具體的使用，感興趣的朋友可以參考下2013-12-12
JavaScript 對(duì)象深入學(xué)習(xí)總結(jié)(經(jīng)典)
JavaScript中，除了五種原始類型（即數(shù)字，字符串，布爾值，null，undefined）之外的都是對(duì)象了，所以，不把對(duì)象學(xué)明白怎么繼續(xù)往下學(xué)習(xí)呢？本篇文章給大家分享javascript對(duì)象深入學(xué)習(xí)總結(jié)，小伙伴們跟著小編一起深入學(xué)習(xí)吧2015-09-09