快捷導(dǎo)航

js document.getElementsByClassName的使用介紹與自定義函數(shù)

更新時(shí)間：2016年11月25日 15:24:30 投稿：mdxy-dxy

今天在增加一個(gè)功能的時(shí)候需要用到getElementsByClassName()，getElementsByClassName但是HTML5 新增的DOM API。IE8以下不支持，那么就需要下面的方法解決了

getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持搜索。

getElementByClassName()函數(shù)的使用方法：

使用JavaScript訪問DOM的一個(gè)重大問題是,此過程需要一種通過元素類名稱來選擇類的類函數(shù),對DOMContentReady,這種類函數(shù)的缺失導(dǎo)致開發(fā)人員需要自己編寫自定義腳本業(yè)執(zhí)行上述任務(wù),許多這個(gè)類腳本都是圍繞著getElementByClassName()建立的,這種解決方法在HTML5中被標(biāo)準(zhǔn)化,另外,這種方法還本地存在于現(xiàn)代瀏覽器中,GetElementByClassName()只使用一個(gè)字符串值作為輸入.并返回一個(gè)Nodelist,這個(gè)NodeList包含所有類名稱匹配這個(gè)字符串值的元素:

var el = document.getElementsByClassName('foo');

通過在字符串中使用空格分隔類,也可以匹配多個(gè)類,下面的代碼挑選出了所有既擁有foo類名稱又擁有bar類名稱的元素:

var el = document.getElementsByClassName('foo bar');

W3C沒有g(shù)etElementByClassName這個(gè)函數(shù)，我們可以自己定義一個(gè)函數(shù)來模擬它。

一般如下幾種方法：

1、要不就是使用jquery來實(shí)現(xiàn)

2、通過自定義函數(shù)解決

class單個(gè)時(shí) 如class="test"

function getElementsByClassName (className) {
		  var all = document.all ? document.all : document.getElementsByTagName('*');
		  var elements = new Array();
		  for (var e = 0; e < all.length; e++) {
			if (all[e].className == className) {
				elements[elements.length] = all[e];
				break;
			}
		  }
		  return elements;
		 }

代碼二、

function getElementsByClassName(className,parent){
        var oParent=parent?document.getElementById("parent"):document;
        var oLis=oParent.getElementsByTagName("*");
        var arr=[];
        for(var i=0;i<oLis.length;i++){
          if(oLis[i].className==className){
            arr.push(oLis[i])
          };
          return arr;
        }
      };

class有多個(gè)的時(shí)候同樣匹配,如class="test1 test2 test3"

function getElementsByClassName (className) {
		  var all = document.all ? document.all : document.getElementsByTagName('*');
		  var elements = new Array();
		  for (var e = 0; e < all.length; e++) {
			 var classList = all[e].className.split(" ");
			 for(var i=0;i<classList.length;i++){
				 if (classList[i] == className) {
					elements[elements.length] = all[e];
				  break;
				 }
			 }
		  }
		  return elements;
		 }

下面再附一個(gè)完整的測試代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8' />
  <script>
    /*JS寫getElementByClassName;
    我發(fā)現(xiàn)chorm、firefox、ie都支持document.getElementsByClassName */
      window.onload = function(){
        var adom = document.getElementsByClassName('a1');
        for(var i = 0;i<adom.length;i++)
          adom[i].style.backgroundColor="red";
      };
      function getElementByClassName(className){
        var elems = [];
        if(!document.getElementsByClassName){
          alert("no exit");
          var dom = document.getElementByTagName('*');
          for(var i = 0;i<dom.length;i++){
            if(dom[i].className == className)
              elems.push(dom[i]);
          }
        }else{
          elems = document.getElementsByClassName(className);
          alert('exit');
        }
        return elems;
      }
  </script>
</head>

<body>
  <div id="a1">a1</div>
  <div class="a1">a1</div>
  <div class="a1">a1</div>
  <div id="a1">a1</div>
  <div class="a1">a1</div>
</body>

</html>

效果如圖所示：