首頁(yè) > 設計 > WEB開(kāi)發(fā) > 正文

getElementsByClassName()用法詳解

2019-11-04 08:04:24
字體:
來(lái)源:轉載
供稿:網(wǎng)友

getElementsByClassName()用法詳解

getElementsByClassName()用法詳解:

在編程中,我們習慣于使用以下方式獲取對象:

getElementById('id')getElementsByName('name')getElementsByTagName('tag')

第一個(gè)可以獲取指定id值的對象,第二個(gè)可以獲取具有指定name屬性值的對象集合,第三個(gè)則是獲取指定標簽名稱(chēng)的對象集合。這三種方式在編寫(xiě)代碼中非常的常用,當然也非常的便利,這個(gè)時(shí)候可能很多朋友就有這樣的以為,class屬性作為標簽的常用屬性,有沒(méi)有一個(gè)方法能夠通過(guò)制定的class屬性值獲取對象,其實(shí)這樣的方法并非沒(méi)有:

getElementsByTagName("class")

此方法實(shí)現了我們想要的功能,它可以獲取具有指定class屬性值的對象集合,但是令人遺憾的是具有瀏覽器兼容問(wèn)題。代碼實(shí)例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>getElementsByClassName()用法詳解-螞蟻部落</title><script type="text/javascript">window.onload=function(){  document.getElementsByClassName("mytest")[0].style.color="#F00";}</script></head>  <body>  <div class="mytest">大家好</div></body></html>

以上代碼可以在谷歌、火狐和IE8以上的瀏覽器中完美運行,但是IE8和IE8以下的瀏覽器不支持此函數。雖然在將來(lái)低版本的IE瀏覽器退出市場(chǎng)之后,此函數肯定會(huì )意氣風(fēng)發(fā),當前來(lái)說(shuō)還是最好不要直接使用此函數,不過(guò)我們可以模擬實(shí)現此函數。

代碼實(shí)例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>getElementsByClassName()用法詳解-螞蟻部落</title><script type="text/Javascript">var getElementsByClass=function(searchClass,node,tag){  var classElements=new Array();  if(node==null){    node=document;  }  if(tag==null){    tag='*';  }  var els=node.getElementsByTagName(tag);  var elsLen=els.length;  var pattern=new RegExp("(^|//s)"+searchClass+"(//s|$)");  for(i=0,j=0;i<elsLen;i++) {   if(pattern.test(els[i].className)){    classElements[j]=els[i];    j++;   }  }  return classElements;}window.onload=function(){  getElementsByClass("haha")[0].style.color="#F00";}</script></head><body>  <div class="mytest haha">大家好</div></body></html>

以上代碼模擬實(shí)現了getElementsByClassName()功能,下面簡(jiǎn)單介紹一下如何實(shí)現此功能:一.實(shí)現原理:通過(guò)getElementsByTagName()函數獲取相應的對象集合,然后再使用for循環(huán)語(yǔ)句來(lái)遍歷每一個(gè)對象,并使用pattern.test()檢測對象的className屬性值是否含有正則表達式所匹配的內容,如果有則說(shuō)明對象的具有指定的class屬性值,并將此對象存儲在classElements數組中,最后返回此數組,此數組中的元素即是具有指定class屬性值的對象。二.代碼注釋:1.var classElements=new Array(),創(chuàng )建一個(gè)數組用來(lái)存放具有指定class屬性值的對象。2.if(node==null),判斷是否指定了節點(diǎn),如果沒(méi)有則使用document作為默認節點(diǎn)。指定了getElementsByTagName()的查找范圍。3.if(tag==null),判斷是否指定了標簽名稱(chēng),如果沒(méi)有則使用通配符(*),也就是獲取所有的標簽。4.var els=node.getElementsByTagName(tag),獲取指定節點(diǎn)下具有指定標簽名稱(chēng)的對象。5.var elsLen=els.length,獲取對象的數量。6.var pattern=new RegExp("(^|//s)"+searchClass+"(//s|$)"),創(chuàng )建一個(gè)正則對象,規定如何檢索具有給定class屬性值的對象。這里需要具有一定的正則表達式知識。之所以使用以上規則就是為兼容class="mytest haha"這種形式的class屬性值和防止一個(gè)class屬性值中包含有要檢索的class屬性值被匹配的情況,例如,一個(gè)class="haorenyisheng" ,另一個(gè)class="hao",如果要檢索"hao",這樣"haorenyisheng"就不會(huì )被匹配了。7.for循環(huán)用來(lái)執行便利每一個(gè)對象的className屬性值(即class屬性值),并檢測是否符合匹配規則,如果符合則將此對象存入classElements數組。8.return classElements,返回數組對象,即具有指定class屬性值的對象。9.getElementsByClass("haha")[0].style.color="#F00",設置class屬性值為"haha"的對象中字體顏色為#F00。


發(fā)表評論 共有條評論
用戶(hù)名: 密碼:
驗證碼: 匿名發(fā)表