Справочник · JavaScript

querySelectorAll: список элементов

Метод возвращает все совпадения в порядке документа. Это не живая магия: после добавления карточек список нужно запросить снова.

Как это работает

Результат можно обойти через for...of. Это не массив, пока не сделать Array.from или spread, поэтому map сразу может отсутствовать. Селектор пиши по классу роли, а не по тегу p. Если нужен один элемент, бери querySelector. Пустой список — нормальный результат, его длина равна нулю, ошибки нет.

const cards = document.querySelectorAll(".card");
for (const card of cards) {
  card.classList.add("is-visible");
}

Когда использовать

Все карточки, все ошибки формы, все пункты меню. Один главный узел ищи по id.

Частые ошибки

• Ждали массив и вызвали map без преобразования.
• Селектор случайно захватил чужие блоки.
• После добавления пункта работает старый пустой список.