getElementsByClassName方法不工作，但为的getElementById(getE

下面的代码工作（警报弹出）：

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

文章来源: getElementsByClassName not working but getElementById is