getElementsByClassName()用法詳解:
在編程中，我們習慣于使用以下方式獲取對象:
getElementById('id')getElementsByName('name')getElementsByTagName('tag')第一個可以獲取指定id值的對象，第二個可以獲取具有指定name屬性值的對象集合，第三個則是獲取指定標簽名稱的對象集合。這三種方式在編寫代碼中非常的常用，當然也非常的便利，這個時候可能很多朋友就有這樣的以為，class屬性作為標簽的常用屬性，有沒有一個方法能夠通過制定的class屬性值獲取對象，其實這樣的方法并非沒有：
getElementsByTagName("class")此方法實現了我們想要的功能，它可以獲取具有指定class屬性值的對象集合，但是令人遺憾的是具有瀏覽器兼容問題。代碼實例如下:
<!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以下的瀏覽器不支持此函數。雖然在將來低版本的IE瀏覽器退出市場之后，此函數肯定會意氣風發，當前來說還是最好不要直接使用此函數，不過我們可以模擬實現此函數。
代碼實例如下:
<!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>
以上代碼模擬實現了getElementsByClassName()功能，下面簡單介紹一下如何實現此功能:一.實現原理:通過getElementsByTagName()函數獲取相應的對象集合，然后再使用for循環語句來遍歷每一個對象，并使用pattern.test()檢測對象的className屬性值是否含有正則表達式所匹配的內容，如果有則說明對象的具有指定的class屬性值，并將此對象存儲在classElements數組中，最后返回此數組，此數組中的元素即是具有指定class屬性值的對象。二.代碼注釋:1.var classElements=new Array()，創建一個數組用來存放具有指定class屬性值的對象。2.if(node==null)，判斷是否指定了節點，如果沒有則使用document作為默認節點。指定了getElementsByTagName()的查找范圍。3.if(tag==null)，判斷是否指定了標簽名稱，如果沒有則使用通配符（*），也就是獲取所有的標簽。4.var els=node.getElementsByTagName(tag)，獲取指定節點下具有指定標簽名稱的對象。5.var elsLen=els.length，獲取對象的數量。6.var pattern=new RegExp("(^|//s)"+searchClass+"(//s|$)")，創建一個正則對象，規定如何檢索具有給定class屬性值的對象。這里需要具有一定的正則表達式知識。之所以使用以上規則就是為兼容class="mytest haha"這種形式的class屬性值和防止一個class屬性值中包含有要檢索的class屬性值被匹配的情況，例如，一個class="haorenyisheng" ，另一個class="hao"，如果要檢索"hao"，這樣"haorenyisheng"就不會被匹配了。7.for循環用來執行便利每一個對象的className屬性值（即class屬性值），并檢測是否符合匹配規則，如果符合則將此對象存入classElements數組。8.return classElements，返回數組對象，即具有指定class屬性值的對象。9.getElementsByClass("haha")[0].style.color="#F00"，設置class屬性值為"haha"的對象中字體顏色為#F00。
新聞熱點
疑難解答
