javascript如何獲取具有指定class屬性的元素物件

admin發表於2017-03-08
JavaScript物件

在頁面中我們常用class設定元素的樣式，如果可以通過class屬性值獲取相關物件那將是一件非常便利的事情，幸運的是javascript提供了這樣的函式getElementsByClassName()可以實現此功能，不幸的是，此函式具有極大的瀏覽器相容性，下面提供一段能夠相容所有主流瀏覽器的程式碼供大家參考之用，希望能夠有所幫助。程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

以上程式碼實現了我們的要求，可以獲得具有指定class屬性值的物件集合。

相關文章