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

В JavaScript существует несколько способов для перебора элементов по селектору. Вот несколько из них:

1. Метод querySelectorAll(): Этот метод позволяет нам выбирать все элементы, соответствующие селектору, и возвращать их в виде коллекции NodeList. Мы можем перебрать эту коллекцию с помощью цикла for или forEach.

const elements = document.querySelectorAll('.selector'); // выбираем все элементы по селектору

// перебираем коллекцию с помощью цикла for
for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  // делаем что-то с каждым элементом
}

// перебираем коллекцию с помощью forEach
elements.forEach((element) => {
  // делаем что-то с каждым элементом
});

2. Метод getElementsByClassName(): Этот метод позволяет нам выбрать элементы по классу и возвращать их в виде коллекции HTMLCollection. Как и в предыдущем случае, мы можем перебрать эту коллекцию с помощью цикла for или forEach.

const elements = document.getElementsByClassName('selector'); // выбираем элементы по классу

// перебираем коллекцию с помощью цикла for
for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  // делаем что-то с каждым элементом
}

// перебираем коллекцию с помощью forEach
Array.from(elements).forEach((element) => {
  // делаем что-то с каждым элементом
});

3. Метод getElementById(): Этот метод позволяет нам выбрать элемент по его идентификатору. В этом случае, мы получим только один элемент, и его можно использовать непосредственно.

const element = document.getElementById('selector'); // выбираем элемент по его идентификатору

// делаем что-то с элементом

4. Метод querySelector(): Этот метод позволяет нам выбрать первый элемент, соответствующий селектору. Если нам нужно выбрать только один элемент, этот метод может быть полезным.

const element = document.querySelector('.selector'); // выбираем первый элемент по селектору

// делаем что-то с элементом

Это не полный список методов, доступных для выбора элементов по селектору, но эти методы являются наиболее распространенными и обеспечивают достаточную гибкость для перебора элементов селектора в JavaScript.