在一个类中获取一个元素？

Question

如何获取类中的每个按钮并向其添加事件侦听器？

就像是:

var item = document.getElementsByClassName("holder").getElementsByTagName("button");

Array.from(item).forEach(function(element) {
  element.addEventListener('click', () => {
    console.log('a');
  }, false);
});

<div class="holder">
  <button>click me</button>
</div>
<div class="holder">
  <button>click me</button>
</div>

Answer 1

您可以使用document.querySelectorAll它返回可迭代列表.

您的以下调用document.getElementsByClassName("holder")将返回元素列表,您必须遍历该列表才能访问该按钮的调用.

我将事件参数添加到侦听器,以便您可以跟踪单击的目标按钮.

document.querySelectorAll('.holder button').forEach(button => {
  button.addEventListener('click', (e) => {
    console.log('Button: ' + e.target.name);
  }, false);
});

<div class="holder">
  <button name="button-1">click me</button>
</div>
<div class="holder">
  <button name="button-2">click me</button>
</div>

有关更多信息,请查看:

• MDN Web文档 - document.querySelectorAll
• Sitepoint - Vanilla JS中DOM操作的基础 - 使用NodeLists
• CSS-Tricks:循环遍历querySelectorAll匹配