推薦一個(gè)封裝好的getElementsByClassName方法

更新時(shí)間：2014年12月02日 15:01:00 投稿：hebedich

這篇文章主要推薦一個(gè)封裝好的getElementsByClassName方法,需要的朋友可以參考下

我們知道，原生的JS給我們提供了getElementsByClassName方法，可以通過此方法獲取到含有某指定class的節(jié)點(diǎn)集合，注意是集合，也就是此函數(shù)返回一個(gè)數(shù)組。

但是，IE卻并不支持這個(gè)方法，但這方法卻是很有實(shí)用性，所以，我們又不得不專門為IE實(shí)現(xiàn)這么一個(gè)函數(shù)。

function getElementsByClassName(oEle,sClass,sEle){
if(oEle.getElementsByClassName){
    return oEle.getElementsByClassName(sClass);
}else{
    var aEle=oEle.getElementsByTagName(sEle || '*'),
      reg=new RegExp('(^|\\s)'+sClass+'($|\\s)'),
      arr=[],
      i=0,
      iLen=aEle.length;

    for(; i<iLen; i++){
      if(reg.test(aEle[i].className)){
        arr.push(aEle[i]);
      }
    }
    return arr;
}
}

使用方法：

復(fù)制代碼代碼如下:

//第一種：選擇document下的所有class為box_box的div元素
getElementsByClassName(document,'box_box','div')[0].style.background='yellow';

//第二種：選擇document下的所有class為box-box的div元素
getElementsByClassName(document,'box-box','div')[0].style.background='yellow';

//第三種：選擇document下的所有class為box-box元素
getElementsByClassName(document,'box-box')[0].style.background='yellow';

oEle、sClass是必填的，sEle是選填的。

sClass中又中橫線或下劃線親測(cè)木有問題，比如說：box-box box_box；但是如果是其他特殊字符就很有可能有問題了，如：box$box… 當(dāng)然可以自己加轉(zhuǎn)義搞定特殊字符，如：box\\$box…

兼容性：親測(cè)ie6+

小伙伴們自己使用一下就知道了，超級(jí)好用，擴(kuò)散下給其他小伙伴吧。

您可能感興趣的文章:

getElementsByClassName

相關(guān)文章

值得分享的bootstrap table實(shí)例
這篇文章主要為大家詳細(xì)介紹了一個(gè)值得分享的bootstrap table實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
Iview DatePicker 限制選擇當(dāng)前月份及以后的月份
文章介紹了如何使用iviewDatePicker組件限制用戶只能選擇當(dāng)前月份及以后的月份,并提供了相關(guān)的html代碼和js代碼示例,感興趣的朋友跟隨小編一起看看吧
2024-11-11
JavaScript控制Session操作方法
JavaScript代表客戶端，而Session代表的是服務(wù)器（不知道這樣說大家是否能夠理解）接下來介紹JavaScript如何控制Session，感興趣的朋友可以了解下啊
2013-01-01
JavaScript中使用Substring刪除字符串最后一個(gè)字符
刪除字符串最后一個(gè)字符的方法有很多，在本文將為大家介紹下js中的substring是如何做到的，需要的朋友可以參考下
2013-11-11
Bootstrap5的斷點(diǎn)與容器的具體使用
本文將結(jié)合實(shí)例代碼，介紹Bootstrap5的斷點(diǎn)與容器的具體使用，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-07-07
js彈出的對(duì)話窗口永遠(yuǎn)保持居中顯示
本文將介紹js彈出的對(duì)話窗口永遠(yuǎn)保持居中顯示實(shí)現(xiàn)方法，需要了解的朋友可以參考下
2012-12-12
關(guān)于ExtJS4.1:快捷鍵支持的問題
本篇文章小編為大家介紹，關(guān)于ExtJS4.1 快捷鍵支持的問題。需要的朋友參考下
2013-04-04
絕對(duì)經(jīng)典的滑輪新聞顯示(javascript+css)實(shí)現(xiàn)
這篇文章主要介紹了絕對(duì)經(jīng)典的滑輪新聞顯示(javascript+css)實(shí)現(xiàn),需要的朋友可以參考下
2007-03-03
BootStrap智能表單實(shí)戰(zhàn)系列(九)表單圖片上傳的支持
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(九)表單圖片上傳的支持,介紹如何在生成表單后，可以支持上傳圖片后可以及時(shí)預(yù)覽圖片的功能，需要的朋友可以參考下
2016-06-06
javascript inneHTML的地雷
大家都喜歡用innerHTML添加內(nèi)容，但是innerHTML這東西在兩大陣營中有許多不同。
2010-02-02