通过类名而不是ID获取元素[重复]答案

【问题标题】：Get element by class name instead of ID [duplicate]通过类名而不是ID获取元素[重复]
【发布时间】：2021-02-17 16:12:16
【问题描述】：

我正在尝试通过其类名而不是 ID 来选择一个元素，因为我有几个具有相同类名的元素，并且我试图对每个元素的“mouseenter”和“mouseleave”实现相同的效果.

这是我目前的代码：

var circle = document.getElementById('circle')
var timer

circle.addEventListener('mouseenter', function () {
  circle.classList.add('up')
  timer = setInterval(function () {
    circle.classList.toggle('up')
  }, 1000)
})

circle.addEventListener('mouseleave', function () {
  clearInterval(timer)
  circle.classList.remove('up')
})

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  background-color: blue;
  transition: transform 1s ease;
  border-radius: 50px;
}

div.up {
  transform: translateY(-20px);
}

&lt;div id='circle'&gt;&lt;/div&gt;

所以，比如说，我想有多个盒子，我想为每个盒子设置一个类“circle”，而不是为每个盒子创建一个唯一的ID，“circle1”，“circle2”，等并找到所有这些 ID，我如何通过类名获取元素并应用我现在拥有的相同效果？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

var boxes = document.getElementsByClassName('box')

for (var i = 0; i < boxes.length; i++) {
    boxes[i].addEventListener('click', myFunction);
}

上面的代码选择了带有类名框的框，它返回一个NodeList，我们可以遍历节点列表并将EventListener添加到每个节点。

【讨论】：

【解决方案2】：

在 Google 中按类搜索 javascript 获取元素： tuto 如果你有一门课要搜索

document.getElementsByClassName('test')

如果你有 2 个

document.getElementsByClassName('rouge test')

【讨论】：