getElementsByClassName方法不工作，但的getElementById是

Question

下面的代碼工作（警報彈出）：

var sound = document.getElementById("music"); 
    sound.addEventListener("play", function() { 
    alert("playing"); 
}); 
.... 
.... 
<audio controls id="music"> 
    <source src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"/> 
</audio> 

但爲什麼這個不行？

var sound = document.getElementsByClassName("music"); 
    sound.addEventListener("play", function() { 
    alert("playing"); 
}); 
.... 
.... 
<audio controls class="music"> 
    <source src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"/> 
</audio> 

這不工作，要麼萬一getElementsByClassName方法返回不同的東西比的getElementById：

('.sound').addEventListener("play", function() { 
    alert("playing"); 
}); 
.... 
.... 
<audio controls class="music"> 
    <source src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"/> 
</audio> 

我所改變的是一個ID而不是，我給它一個類（因爲我有多個實例這個音頻播放器），並使用getElementsByClassName而不是getElementById。我認爲getElementsByClassName現在與所有瀏覽器兼容？我正在使用最新的Firefox。

Answer 1

我很確定document.getElementsByClassName()將返回元素集合，即使頁面上只有一個具有該類名稱的元素。所以你實際上並沒有將事件監聽器應用到音頻元素，而是一組元素。

如果總是隻有一個類聲音元素，請嘗試var sound = document.getElementsByClassName("music")[0];。