如何在不使用ID的情况下通过DOM隐藏/取消隐藏元素？

Question

  var onoffbutton = document.getElementById("onoffInput");
  onoffbutton.addEventListener('click', function(event) {
    if(document.getElementById("demoE").innerHTML==="first"){
    document.getElementById("demoE").innerHTML ="second";
    document.getElementsByClassName('animation').hidden = false;
    return;
    }
    if(document.getElementById("demoE").innerHTML==="second"){
    document.getElementById("demoE").innerHTML ="first";
    document.getElementsByClassName('animation').hidden = true;
    return;
    }
    } , false)

当我使用document.getElementsByClassName('animation').hidden = false;时，它不起作用，但当我使用document.getElementById('animation').hidden = false时，它可以帮助我取消隐藏图像。问题是我的图像已经附加了ID。

<img class="animation" src="gifs/right.gif" hidden> vs. <img class="animation" id="original-pick" hidden>注意我有两个选择器连接到第二个元素。谢谢！

Answer 1

我认为最好的选择是使用document.querySelector(...)：

document.querySelector(".animation").hidden = false;

可以找到有关此功能的更多文档here。