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

2019-11-19 18:49:15

字體：大中小

供稿：網(wǎng)友

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>

效果如圖所示：