js通過(guò)classname來(lái)獲取元素的方法
更新時(shí)間：2016年11月24日 08:58:47 投稿：jingxian
下面小編就為大家?guī)?lái)一篇js通過(guò)classname來(lái)獲取元素的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起 小編過(guò)來(lái)看看吧
原生JS有3種方式來(lái)獲取元素:
getElementById('id')
getElementsByName('name')
getElementsByTagName('tag')
getElementById是獲取元素最快的方式,但我們不能給每個(gè)HTML元素都加以ID吧,所以我們需要一個(gè)很方便的通過(guò)className來(lái)獲取元素
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"));
實(shí)現(xiàn)原理很簡(jiǎn)單,通過(guò)getElementsByTagName獲取到一個(gè)元素集合,如果傳入了tagname這個(gè)參數(shù)就根據(jù)傳入的
tagname來(lái)獲取,否則獲取所有的元素,然后再一個(gè)一個(gè)元素來(lái)匹配classname是否相等..
上面這個(gè)方法很粗糙,能實(shí)現(xiàn)我們的基本需求,如果我們要獲取的元素有多個(gè) classname怎么辦?
明顯通過(guò)className==是不行了
所以我們只要把上面兩篇文章的hasclass函數(shù)搬過(guò)來(lái)就OK了，我們?cè)俅蝸?lái)改造下我們的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;
}
這樣就能處理一個(gè)元素含有多個(gè)classname的情況了
以上就是小編為大家?guī)?lái)的js通過(guò)classname來(lái)獲取元素的方法全部?jī)?nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS作用域，剖析JS的作用域問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
createElement與createDocumentFragment的點(diǎn)點(diǎn)區(qū)別小結(jié)
在DOM操作里，createElement是創(chuàng)建一個(gè)新的節(jié)點(diǎn)，createDocumentFragment是創(chuàng)建一個(gè)文檔片段2011-12-12
js單獨(dú)獲取一個(gè)checkbox看其是否被選中
這篇文章主要與大家分享js獲取一個(gè)checkbox看其是否被選中的具體實(shí)現(xiàn)，很簡(jiǎn)單，但很實(shí)用，需要的朋友可以參考下2014-09-09
判斷用戶是否在線的代碼，需要的朋友可以參考下。2011-03-03
下面小編就為大家?guī)?lái)一篇JS去除空格和換行的正則表達(dá)式(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
JavaScript 解決ajax中parsererror錯(cuò)誤案例詳解
這篇文章主要介紹了JavaScript 解決ajax中parsererror錯(cuò)誤案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)答題功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了js檢測(cè)iframe是否加載完成的方法,涉及JavaScript針對(duì)框架頁(yè)面控件值的判斷與頁(yè)面加載的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
js監(jiān)聽(tīng)html頁(yè)面的上下滾動(dòng)事件方法
今天小編就為大家分享一篇js監(jiān)聽(tīng)html頁(yè)面的上下滾動(dòng)事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
js實(shí)現(xiàn)文章目錄索引導(dǎo)航(table of content)
這篇文章主要介紹了js實(shí)現(xiàn)文章目錄索引導(dǎo)航(table of content),需要的朋友可以參考下2020-05-05