2011年5月10日 星期二

用 javascript 選取 class name 物件

習慣了 jQuery 所提供的選擇器 (Selectors)，可以很方便的選取頁面上有相同 class name 的物件。但當你在沒有辦法使用 jQuery 的情況下，就得事事都要親力而為了。或許，以後的以後，像是 HTML 5 的標準裡，已經新增了  getElementsByClassName() 這方法，但我目前還沒有勇氣告訴使用者，本網站拒絕不支援 HTML5 的瀏覽器參訪。

但這問題還好，其實可以在 google 上找到各式各樣的範例來參考，也不用擔心你會找不到。只是自己將測試過、合用的範本記錄下來，方便日後 Copy ...

我在 anyexample 網站找到一段適用於目前各主要瀏覽器都可正常使用的程式 getElementsByClass()：

<html>
<head>
<script>
function getElementsByClass( searchClass, domNode, tagName) { 
 if (domNode == null) domNode = document;
 if (tagName == null) tagName = '*';
 var el = new Array();
 var tags = domNode.getElementsByTagName(tagName);
 var tcl = " "+searchClass+" ";
 for(i=0,j=0; i<tags.length; i++) { 
  var test = " " + tags[i].className + " ";
  if (test.indexOf(tcl) != -1) 
   el[j++] = tags[i];
 } 
 return el;
} 

function SearchClassSwitch()
{

 var cssArray=getElementsByClass('dv');

 for(i=0; i<cssArray.length; i++) 
 {
  if (cssArray[i].style.display=='')
   cssArray[i].style.display = 'none';
  else
   cssArray[i].style.display = '';
 }
}


</script>
</head>
<div class="dv">讓我藏起來</div>
<div class="dv">看不見</div>
<input type="button" value="隱藏切換" onclick="SearchClassSwitch();" />
</html>

他執行的結果就會如下圖：


既然先前有提到， HTML 5 會開始支援 getElementsByClassName() 方法，趁這機會也來測試一下：

<html>
<head>
<script>
function getElementsByClass( searchClass, domNode, tagName) { 
 if (domNode == null) domNode = document;
 if (tagName == null) tagName = '*';
 var el = new Array();
 var tags = domNode.getElementsByTagName(tagName);
 var tcl = " "+searchClass+" ";
 for(i=0,j=0; i<tags.length; i++) { 
  var test = " " + tags[i].className + " ";
  if (test.indexOf(tcl) != -1) 
   el[j++] = tags[i];
 } 
 return el;
} 

function SearchClassSwitch()
{

 var cssArray=getElementsByClass('dv');

 for(i=0; i<cssArray.length; i++) 
 {
  if (cssArray[i].style.display=='')
   cssArray[i].style.display = 'none';
  else
   cssArray[i].style.display = '';
 }
}

function Html_5()
{
 var cssArray=document.getElementsByClassName('dv');
 for(i=0; i<cssArray.length; i++) 
 {
  if (cssArray[i].style.display=='')
   cssArray[i].style.display = 'none';
  else
   cssArray[i].style.display = '';
 }
}

</script>
</head>
<div class="dv">讓我藏起來</div>
<div class="dv">看不見</div>
<input type="button" value="隱藏切換" onclick="SearchClassSwitch();" />
<input type="button" value="隱藏切換 Html5" onclick="Html_5();" />
</html>

結果是：

IE8   不行
FireFox 3.6 OK
Chrome 11.x OK
Opera 11.x OK



參考：
01.HTML5 技術體系中的 JavaScript
02.JavaScript getElementsByClass function
張貼者： 李志堅 於 5/10/2011 03:28:00 下午
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)