js document.getElementsByClassName的使用介紹與自定義函數(shù)
getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持搜索。
getElementByClassName()函數(shù)的使用方法:
使用JavaScript訪問DOM的一個(gè)重大問題是,此過程需要一種通過元素類名稱來選擇類的類函數(shù),對DOMContentReady,這種類函數(shù)的缺失導(dǎo)致開發(fā)人員需要自己編寫自定義腳本業(yè)執(zhí)行上述任務(wù),許多這個(gè)類腳本都是圍繞著getElementByClassName()建立的,這種解決方法在HTML5中被標(biāo)準(zhǔn)化,另外,這種方法還本地存在于現(xiàn)代瀏覽器中,GetElementByClassName()只使用一個(gè)字符串值作為輸入.并返回一個(gè)Nodelist,這個(gè)NodeList包含所有類名稱匹配這個(gè)字符串值的元素:
var el = document.getElementsByClassName('foo');
通過在字符串中使用空格分隔類,也可以匹配多個(gè)類,下面的代碼挑選出了所有既擁有foo類名稱又擁有bar類名稱的元素:
var el = document.getElementsByClassName('foo bar');
W3C沒有g(shù)etElementByClassName這個(gè)函數(shù),我們可以自己定義一個(gè)函數(shù)來模擬它。
一般如下幾種方法:
1、要不就是使用jquery來實(shí)現(xiàn)
2、通過自定義函數(shù)解決
class單個(gè)時(shí) 如class="test"
function getElementsByClassName (className) { var all = document.all ? document.all : document.getElementsByTagName('*'); var elements = new Array(); for (var e = 0; e < all.length; e++) { if (all[e].className == className) { elements[elements.length] = all[e]; break; } } return elements; }
代碼二、
function getElementsByClassName(className,parent){ var oParent=parent?document.getElementById("parent"):document; var oLis=oParent.getElementsByTagName("*"); var arr=[]; for(var i=0;i<oLis.length;i++){ if(oLis[i].className==className){ arr.push(oLis[i]) }; return arr; } };
class有多個(gè)的時(shí)候同樣匹配,如class="test1 test2 test3"
function getElementsByClassName (className) { var all = document.all ? document.all : document.getElementsByTagName('*'); var elements = new Array(); for (var e = 0; e < all.length; e++) { var classList = all[e].className.split(" "); for(var i=0;i<classList.length;i++){ if (classList[i] == className) { elements[elements.length] = all[e]; break; } } } return elements; }
下面再附一個(gè)完整的測試代碼:
<!DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <script> /*JS寫getElementByClassName; 我發(fā)現(xiàn)chorm、firefox、ie都支持document.getElementsByClassName */ window.onload = function(){ var adom = document.getElementsByClassName('a1'); for(var i = 0;i<adom.length;i++) adom[i].style.backgroundColor="red"; }; function getElementByClassName(className){ var elems = []; if(!document.getElementsByClassName){ alert("no exit"); var dom = document.getElementByTagName('*'); for(var i = 0;i<dom.length;i++){ if(dom[i].className == className) elems.push(dom[i]); } }else{ elems = document.getElementsByClassName(className); alert('exit'); } return elems; } </script> </head> <body> <div id="a1">a1</div> <div class="a1">a1</div> <div class="a1">a1</div> <div id="a1">a1</div> <div class="a1">a1</div> </body> </html>
效果如圖所示:
- javascript自定義日期比較函數(shù)用法示例
- JS中創(chuàng)建自定義類型的常用模式總結(jié)【工廠模式,構(gòu)造函數(shù)模式,原型模式,動態(tài)原型模式等】
- AngularJs1.x自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法
- JS自定義函數(shù)實(shí)現(xiàn)時(shí)間戳轉(zhuǎn)換成date的方法示例
- JavaWeb開發(fā)之JSTL標(biāo)簽庫的使用、 自定義EL函數(shù)、自定義標(biāo)簽(帶屬性的、帶標(biāo)簽體的)
- 自定義require函數(shù)讓瀏覽器按需加載Js文件
- 常用原生js自定義函數(shù)總結(jié)
- JS自定義函數(shù)對web前端上傳的文件進(jìn)行類型大小判斷
- PHP自定義函數(shù)格式化json數(shù)據(jù)示例
- 詳解JavaScript自定義函數(shù)
相關(guān)文章
JavaScript動態(tài)添加css樣式和script標(biāo)簽
這篇文章主要介紹了JavaScript動態(tài)添加css樣式和script標(biāo)簽的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07JS+CSS實(shí)現(xiàn)感應(yīng)鼠標(biāo)漸變顯示DIV層的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)感應(yīng)鼠標(biāo)漸變顯示DIV層的方法,涉及javascript對div層的逐漸顯示與隱藏的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-02-02Echarts動態(tài)加載多條折線圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了Echarts動態(tài)加載多條折線圖的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05微信小程序?qū)崿F(xiàn)發(fā)微博功能的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)發(fā)微博功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06獲取服務(wù)器傳來的數(shù)據(jù) 用JS去空格的正則表達(dá)式
獲取服務(wù)器傳來的數(shù)據(jù) 用JS去空格的正則表達(dá)式,需要的朋友可以參考下2012-03-03JavaScript日期時(shí)間與時(shí)間戳的轉(zhuǎn)換函數(shù)分享
這篇文章主要介紹了JavaScript日期時(shí)間與時(shí)間戳的轉(zhuǎn)換函數(shù)分享,本文給出兩個(gè)函數(shù)實(shí)現(xiàn)日期時(shí)間和時(shí)間戳間的轉(zhuǎn)換,需要的朋友可以參考下2015-01-01