(原創) 如何實現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
超苦的Ga的getElementByClassName