原生JS有3種方式來獲取元素:
getElementById('id')getElementsByName('name')getElementsByTagName('tag')getElementById是獲取元素最快的方式,但我們不能給每個HTML元素都加以ID吧,所以我們需要一個很方便的通過className來獲取元素function getElementsByClassName(className,tagName){var ele=[],all=document.getElementsByTagName(tagName||"*");for(var i=0;i<all.length;i++){if(all[i].className==className){ele[ele.length]=all[i]; }}return ele;}console.log(getElementsByClassName("entry"));console.log(getElementsByClassName("entry","div"));實現原理很簡單,通過getElementsByTagName獲取到一個元素集合,如果傳入了tagname這個參數就根據傳入的
tagname來獲取,否則獲取所有的元素,然后再一個一個元素來匹配classname是否相等..
上面這個方法很粗糙,能實現我們的基本需求,如果我們要獲取的元素有多個 classname怎么辦?
明顯通過className==是不行了
所以我們只要把上面兩篇文章的hasclass函數搬過來就OK了,我們再次來改造下我們的getElementsByClassName函數
function getElementsByClassName(className,tagName){var ele=[],all=document.getElementsByTagName(tagName||"*");for(var i=0;i<all.length;i++){if(all[i].className.className.match(new RegExp('(//s|^)'+cls+'(//s|$)'))){ele[ele.length]=all[i];} }return ele;}這樣就能處理一個元素含有多個classname的情況了
以上就是小編為大家帶來的js通過classname來獲取元素的方法全部內容了,希望大家多多支持武林網~
新聞熱點
疑難解答