成人免费无遮挡无码视频,国产无遮挡18禁网站免费,免费无码又爽又刺激软件下载

<nav id="ygnmy"></nav>
<form id="ygnmy"></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。


    發表評論 共有條評論
    用戶名: 密碼:
    驗證碼: 匿名發表
    成人免费无遮挡无码视频,国产无遮挡18禁网站免费,免费无码又爽又刺激软件下载