<noframes id="tfbvr">
<listing id="tfbvr"></listing>

        <track id="tfbvr"></track>

          <th id="tfbvr"></th>

            <th id="tfbvr"></th>

              <form id="tfbvr"></form>

                <form id="tfbvr"><thead id="tfbvr"><menuitem id="tfbvr"></menuitem></thead></form>

                首頁 > 設計 > WEB開發 > 正文

                getElementsByClassName()用法詳解

                2019-11-04 08:04:24
                字體:
                來源:轉載
                供稿:網友

                getElementsByClassName()用法詳解

                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。


                發表評論 共有條評論
                用戶名: 密碼:
                驗證碼: 匿名發表
                <noframes id="tfbvr">
                <listing id="tfbvr"></listing>

                      <track id="tfbvr"></track>

                        <th id="tfbvr"></th>

                          <th id="tfbvr"></th>

                            <form id="tfbvr"></form>

                              <form id="tfbvr"><thead id="tfbvr"><menuitem id="tfbvr"></menuitem></thead></form>

                              亚洲国产综合无码一区二区BT下... 9420高清完整版在线观看免费 国产CHINESEHDXXXX... 黄 色 免 费 成 人 A片 欧美性受XXXX黑人XYX性爽