Javascript 使用getElementsByTagName时，如何指定单击哪个元素

我正在为我的工作建立一个轻量级网站。它的JS交互性非常小，仅使用GSAP和TweenLite（）制作1-2个动画。因为它几乎所有的元素都是唯一的，所以我主要可以使用getElementById（）来涵盖它们

一个涉及多个类似因素的问题让我感到悲伤。手风琴式菜单：

<button>MenuOne</button>
<div>
    <a>...</a>
    <a>...</a>
    <a>...</a>
</div>

<button>MenuTwo</button>
<div>
    <a>...</a>
    <a>...</a>
    <a>...</a>
</div>

<button>MenuThree</button>
<div>
    <a>...</a>
    <a>...</a>
    <a>...</a>
</div>

我不想将jQuery用于单个选择器，因为GSAP涵盖了我迄今为止使用的所有动画：

var btn = document.getElementsByTagName('button');

btn.onmouseup=function () {

  //show/hide stuff

};

然而，这似乎对我点击按钮没有反应（没有错误，什么都没有）。我在里面有相同的函数（），可以通过将btn变量放入jquery$（btn）来让它工作

我只能假设btn变量正在监视所有按钮，并且无法区分我刚才单击了哪个按钮（如果有）。jQuery库能够做到这一点

---

在网上搜索，我发现原生JS结果与jquery结果略有不同。在控制台中，jquery显示为Object[array]，javascript显示为HTMLCollectionT[array]。我猜jquery数组的一部分有一些默认情况下不存在的标记

---

我发现了如何在数组中选择[0][1][2]按钮，并可以添加唯一的ID，但我确信我不需要3个单独的函数就可以解决这个问题。

您将通过

document.getElementsByTagName（）

函数获得按钮列表，如果您想在单击特定按钮时附加特定函数，则可以这样做

var allButtons = document.getElementsByTagName('button');
for(var i=0; i<allButtons.length; i++){
    allButtons[i].onclick = myfunction;
}

function myfunction (){
    alert(this.id);
}

var allButtons=document.getElementsByTagName（'button'）；
对于（var i=0；i
，jQuery绑定将自动循环所有捕获的元素，并手动绑定到每个元素。当您使用vanilla JS时，您必须自己进行循环：

var btn = document.getElementsByTagName('button');

for (var i = 0; i < btn.length; i++) {
    btn[i].onmouseup = function () {
        // show/hide code here.
    });
}

var btn=document.getElementsByTagName（'button'）；
对于（变量i=0；i
注意
getElementsByTagName
包含术语“Elements”，即“Element”的复数形式。这已经告诉您，此方法返回一个元素列表。您必须迭代该列表并分配事件处理程序。如果您查看。总是先阅读文档！是的，我看到它针对多个元素，我只是不确定如何选择我想要的元素。在使用Jquery这么长时间后，我设法避免使用for（）循环，我从来没有真正掌握过它们的窍门。谢谢！谢谢你的回复。我以前看过这个，但不知道它是如何简单地包装在原作上的function@Inspironix祝你好运，如果有什么地方卡住了，请分享。
var btn = document.getElementsByTagName('button');

for (var i = 0; i < btn.length; i++) {
    btn[i].onmouseup = function () {
        // show/hide code here.
    });
}