getElementsByClassName() в JavaScript

• Поиск по классу
• Перебор элементов
• Живая коллекция
• getElementsByClassName() или querySelectorAll()
• Итого

Поиск по классу

Метод document.getElementsByClassName() находит все элементы с указанным классом. Результат - коллекция HTMLCollection. Если совпадений нет, она будет пустой, а не равной null.

<article class="card">Первая карточка</article>
<article class="card">Вторая карточка</article>

const cards = document.getElementsByClassName('card');

console.log(cards.length); // 2

В аргумент передают имя класса без точки. Несколько классов указывают через пробел: getElementsByClassName(‘card featured’) найдёт элементы с обоими классами.

Перебор элементов

HTMLCollection не является массивом, поэтому у неё нет метода forEach(). Для обхода используйте обычный цикл for.

for (let index = 0; index < cards.length; index++) {
  cards[index].classList.add('card--selected');
}

Класс card—selected будет добавлен каждой найденной карточке.

Живая коллекция

Коллекция HTMLCollection живая: если на странице добавится подходящий элемент или у существующего изменится искомый класс, результат обновится без повторного вызова метода.

Не удаляйте элементы из такой коллекции и не снимайте с них искомый класс прямо во время обхода - часть элементов можно пропустить. Если нужен фиксированный список, создайте копию через Array.from(cards).

getElementsByClassName() или querySelectorAll()

document.getElementsByClassName('card featured'); // живая HTMLCollection
document.querySelectorAll('.card.featured'); // статический NodeList

getElementsByClassName() принимает только имена классов. querySelectorAll() принимает любой CSS-селектор и удобен, когда нужен фиксированный набор элементов.

Итого

document.getElementsByClassName() находит все элементы по классу и возвращает живую HTMLCollection. Имя класса передают без точки. Для более гибкого поиска и статического результата используйте querySelectorAll().