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，而不是 ID，而是给了它一个类（因为我有此音频播放器的多个实例），并使用 getElementsByClassName 而不是 getElementById。我认为 getElementsByClassName 现在与所有浏览器兼容？我正在使用最新的火狐浏览器。

Answer 1

我很确定document.getElementsByClassName()会返回一组元素，即使页面上只有一个具有该类名称的元素。因此，您实际上并不是将事件侦听器应用于音频元素，而是将事件侦听器应用于元素数组。

如果类声音中始终只有一个元素，请尝试var sound = document.getElementsByClassName("music")[0];.