getElementByClass不起作用

Question

我试图弹出一个窗口，其中包括一个视频。但使用getElementById不工作的多个视频使用相同的代码。我试图使用getElementByClass，但它不适合我。我错过了什么?提前谢谢。

工作代码

    var overlay = document.getElementById('overlay');
    function openModal() {
    overlay.classList.remove("is-hidden");
    }
    function closeModal() {
     overlay.classList.add("is-hidden");
    }    

what I was trying to do (not working):

    var overlay = document.getElementsByClassName('overlay');

我的html:

    <a class="buttonPlay" onclick="openModal();" href="#" style="visibility:visible;color:#ffffff;font-size:24px;">Play movie</a>
                <div class="overlay is-hidden" id="overlay">
                    <a href="/" class="cancel">&times;</a>
                    <div class="video-responsive" style="overflow: visible; padding-bottom: 56.25%; position: relative; height: 0; top: 20%; left: 20%;">
                        <iframe src="@videoSrc" width="500" height="281" style=" left: 0; top: 0; height: 60%; width: 60%; position: absolute; " frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                    </div>
                </div>

Answer 1

.getElementsByClassName返回一个节点列表，即一个类似数组的对象，其中包含与传递的查询匹配的所有DOM元素。

如果要更改返回元素的属性，可以遍历它们:

function openModal() {
    for(var i = 0; i < overlay.length; i++){
        overlay[i].classList.remove("is-hidden");
    }
}

或者，您可以针对集合中的特定元素:

overlay[0].classList.remove("is-hidden"); // First match

JSFiddle