原生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"));

實現(xiàn)原理很簡單,通過getElementsByTagName獲取到一個元素集合,如果傳入了tagname這個參數(shù)就根據(jù)傳入的

tagname來獲取,否則獲取所有的元素,然后再一個一個元素來匹配classname是否相等..

上面這個方法很粗糙,能實現(xiàn)我們的基本需求,如果我們要獲取的元素有多個 classname怎么辦?

明顯通過className==是不行了

所以我們只要把上面兩篇文章的hasclass函數(shù)搬過來就OK了，我們再次來改造下我們的getElementsByClassName函數(shù)

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的情況了

總結(jié)

以上是生活随笔為你收集整理的js通过classname来获取元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。