给a标签添加点击事件，用getElementByClassname失败，但是querySelector成功原因

使用 getElementsByClassName 方法获取到的是一个 HTMLCollection
集合，而不是一个单独的元素，所以需要通过下标或迭代的方式获取到需要操作的元素。

我的错误就是：获取了一个 HTMLCollection 集合，却把它们当做一个单独的元素使用

getElementsByClassName

使用getElementsByClassName可以尝试以下两种方式来为该标签添加点击事件：

1、通过下标获取元素：

const button = document.getElementsByClassName('top-bar__dropdown-button')[0];
button.addEventListener('click', function() {
  alert(123);
});

2、迭代获取元素：

const buttons = document.getElementsByClassName('top-bar__dropdown-button');
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    alert(123);
  });
}

注意：为了确保该代码能够正确执行，需要确保该代码运行时该标签已经被加载到 DOM 中。也就是js文件必须在html页面加载完了再执行

---

querySelector

使用querySelector就不存在这个问题：

如果有多个标签都有同一个类名或标签名，使用 querySelector 获取的是匹配的第一个标签，而不是所有标签的集合。如果需要获取多个标签，可以使用 querySelectorAll 方法，它会返回所有匹配的标签集合，它返回的是一个 NodeList 对象，类似于一个 HTML 集合。

例如，可以使用以下代码获取第一个具有 top-bar__dropdown-button 类的元素：

const firstDropdownButton = document.querySelector('.top-bar__dropdown-button');

要获取所有的具有相同类名的元素，可以使用 querySelectorAll，如下所示：

const dropdownButtons = document.querySelectorAll('.top-bar__dropdown-button');

这将返回一个包含所有具有 top-bar__dropdown-button 类的元素的集合。可以使用数组索引来访问集合中的特定元素，例如：

const secondDropdownButton = dropdownButtons[1];