classList.add（）在函数中不起作用？

Question

classList无法正常工作

var button = document.getElementById('dropdown-trigger'),
    dropdownList = document.getElementsByClassName('dropdown-list'),

button.addEventListener('mouseover', displayDropdown);

function displayDropdown() {
  dropdownList.classList.add('none');
}

我一直进入控制台：

未捕获的TypeError：无法读取未定义的属性“ add”

但是如果我像这样使用classList：

function displayDropdown() {
  button.classList.add('none');
}

它将正常工作。 看来我不能在其他元素上使用classlist？

Answer 1

document.getElementsByClassName返回元素列表，而不是单个元素（因此为'element s '）。 您需要在每个这些元素上添加类。 如果只有一个下拉列表，则还可以为其指定一个ID并使用getElementById代替。

Answer 2

看来我不能在其他元素上使用classlist。

您可以，但不能在NodeList集合上。 您应该遍历集合或从集合中获取特定项。

dropdownList[0].classList.add('none');

另一种选择是使用querySelector方法而不是getElementsByClassName 。 querySelector函数选择第一个匹配的元素。

dropdownList = document.querySelector('.dropdown-list')