(原創) 如何實現getElementByClassName()? (Web) (JavaScript)

Abstract
W3C DOM並沒有制定document.getElementByClassName(),但有時候沒ID,而只有class name可抓時該怎麼辦?

Introduction
對Blog做改造時,常會遇到根本沒有ID可抓,而只有class可抓,但很遺憾W3C DOM並沒有document.getElementByClassName(),以下JavaScript可以模擬getElementByClassName()。

JavaScript / getElementByClassName

 1 function getElementsByClassName (className) {
 2   var all = document.all ? document.all : document.getElementsByTagName('*');
 3   var elements = new Array();
 4   for (var e = 0; e < all.length; e++) {
 5     if (all[e].className == className) {
 6       elements[elements.length] = all[e];
 7       break;
 8     }
 9   }
10   return elements;
11 }
12 


2行

var all = document.all ? document.all : document.getElementsByTagName('*');


document.all為IE4的DHTML的獨門絕技,IE4之後接有支援,所以可以簡單的利用是否有支援document.all判斷是否為IE,若不是IE,則用W3C DOM的document.getElementByTagName('*')取代all,所以這個方式在IE或FireFox皆能使用。

4行 ~ 9行

for (var e = 0; e < all.length; e++) {
  
if (all[e].className == className) {
    elements[elements.length] 
= all[e];
    
break;
  }
}


利用迴圈一個tag一個tag判斷其class name實否符合條件,找到第一個符合條件就跳出迴圈,如此就能找到第一個符合class name的tag。

Conclusion
我在標題加上Google Adsense link就是用這種方法,因為沒ID可用,只好找class name,至於加入的方式,請參考(原創) 如何在Blog內任意處動態產生Google AdSense廣告? (Web) (CSS) (JavaScript)

See Also
(原創) 如何在Blog內任意處動態產生Google AdSense廣告? (Web) (CSS) (JavaScript)
(原創) 為什麼W3C DOM不提供insertAfter? (Web) (JavaScript)

Reference
超苦的GagetElementByClassName

posted on 2008-05-19 04:20  真 OO无双  阅读(3269)  评论(0编辑  收藏  举报

导航