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];。