javascript通過class屬性獲取元素的程式碼

antzone發表於2017-03-26
JavaScript

class是dom元素最為常用的屬性之一，例如可以通過class屬性設定元素的樣式，如果能夠class屬性來獲取相應的dom元素那就再方便不過了，幸好javascript提供了這樣的功能，使用getElementsByTagName()函式就可以獲取具有指定class屬性值的物件集合，不過很可惜，具有一定的瀏覽器相容問題，當然是IE低版本瀏覽器導致的，下面就介紹一下如何實現全相容效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">  
function getElementsByClassName(n){ 
  var classElements=[],allElements=document.getElementsByTagName('*'); 
  for(var i=0; i< allElements.length; i++ ){ 
    if(allElements[i].className==n){ 
      classElements[classElements.length] = allElements[i];
    } 
  } 
  return classElements; 
} 
window.onload=function(){
  var bt=document.getElementById("bt");
  bt.onclick=function(){
    alert(getElementsByClassName("antzone")[0].innerHTML)
  }
}
</script>  
</head>  
<body>  
<input type="button" id="bt" value="點選檢視效果"/>
<ul id="box"> 
  <li>螞蟻部落一</li> 
  <li class="antzone">螞蟻部落二</li> 
  <li>螞蟻部落三</li> 
  <li>螞蟻部落四</li> 
</ul> 
</body>  
</html>

以上程式碼可以實現基本的通過class篩選元素的功能，下面介紹此功能的實現過程。

一.程式碼註釋:

1.function getElementsByClassName(n) {}，此函式實現了此功能，引數n是class屬性值。

2.var classElements=[]，宣告一個陣列存放具有指定class屬性值的元素。

3.allElements=document.getElementsByTagName('*')，獲取頁面中的所有元素。

4.for(var i=0; i< allElements.length; i++ ) ，遍歷每一個頁面元素。

5.if(allElements.className==n)，判斷元素的class屬性值是否是n。

6. classElements[classElements.length]=allElements，如果存在的話，就放入陣列。

7.return classElements，返回這個陣列。

二.相關閱讀:

1.document.getElementsByTagName()函式可以參閱document.getElementsByTagName()一章節。 

2.innerHTML屬性可以參閱js innerHTML一章節。 

特別說明:

程式碼雖然能夠實現簡單的獲取指定class屬性值的元素，但是還不夠完美，可以參閱getElementsByClassName()一章節。

相關文章