Как применить анимацию для всех объектов с одинаковым id/классом?

Question

[maxemga]

У меня есть 6 объектов при наведении, на которые должна происходить анимация
Я привык искать в js объекты по id, но в данной ситуации когда я прописываю

const elem = document.getElementById("ID");

То находит один объект и анимация происходит к одному объекту (ID должен быть один на странице, как гласит правило HTML)
Но если я хочу найти все объекты с одинаковым классом/id и применить к ним анимацию?

const elem = document.querySelectorAll(".class");

Но у меня все равно не получается, пытался выводить

for (let i = 0; i < elem.length; i++) {
     elem[i].classList.toggle("")
}

Как правильно мне это сделать?

Answer 1

[Сергей Романенко]

Потому что ID с одним названием должен быть только один!

Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

htmlbook.ru/html/attr/id

Если с классами то вот так

HTML

<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>

CSS

.class {
  color: red;
}

JS

var els = document.querySelectorAll('.item');
[].forEach.call(els, function(el, i, els) {
     el.classList.add("class");
});

https://codepen.io/Awilum/pen/OJbjRwz

Comments

[maxemga]

Я это знаю, это и написал в вопросе, но мой вопрос, как сделать правильно? Тоесть как найти все мне нужные элементы по классу или по хоть чему и примерить ко всем анимацию?

[Сергей Романенко]

maxemga, Обновил ответ, смотрите.

[Rustam Bainazarov]

maxemga, по любому общему признаку, будь то класс или любой иной атрибут.

[maxemga]

Обнаружил проблему, таким образом ведь анимация применяется ко всем объектам, а мне нужно чтобы применялась только к тому, на который я навел мышкой