DOM腳本getElementsByClassName（用於鏈接）

我正在練習DOM腳本（沒有現實生活中的問題，而是實踐和理論，我知道如何用jQuery實現這一點）因此，我試圖改進和理解以下：DOM腳本getElementsByClassName（用於鏈接）

我有類的一些鏈接，我對他們的附加事件：

<a href="http://www.google.com" class="popup">click</a> 
<a href="http://www.test.com" class="popup">click2</a> 
<a href="http://www.abc.com" class="popup">click3</a> 
<a href="http://www.google.com" class="no">click4</a>

的Javascript：

window.onload = prepareLinks; 

function prepareLinks() { 
    var links = document.getElementsByTagName("a"); 
    for (var i = 0; i < links.length; i++) { 
     if (links[i].getAttribute("class") == "popup") { 
      links[i].onclick = function() { 
       popUp(this.getAttribute("href")); 
       return false; 
      } 
     } 
    } 
} 


function popUp(winURL) { 
    window.open(winURL, "popup", "width=320,height=480"); 
}

這一工程連接東北。我基本上從書中得到它。現在我想通過使用getElementsByClassName來改進它。我接着寫：

window.onload = prepareLinks; 

function prepareLinks() { 
    var links = document.getElementsByTagName("a"); 
    var popups = links.getElementsByClassName("popup"); 
    for (var i = 0; i < popups.length; i++) { 
     popups[i].onclick = function() { 
      popUp(this.getAttribute("href")); 
      return false; 
     } 
    } 
} 


function popUp(winURL) { 
    window.open(winURL, "popup", "width=320,height=480"); 
}

但我得到的錯誤：遺漏的類型錯誤：對象＃有沒有方法「getElementsByClassName方法」

顯然鏈接是一個節點列表，所以我不能使用getElementsByClassName方法就可以了。我真的不明白... 你能幫助我怎麼做到這一點，以及腳本的第一個版本是否好？（表現明智）。謝謝。

來源

2011-10-16 George Katsanos

如果錨點有兩個或多個類，'links [i] .getAttribute（「class」）==「popup」'將不起作用。 –

如果這些'.popup'錨點有一個共同的祖先，請考慮事件委派。爲每個錨點分配一個事件處理程序是你想避免的事情。 –