Привет, уважаемый веб-разработчик! Сегодня мы окунемся в чудесный мир выбора элементов по классам в стандартном JavaScript. Независимо от того, являетесь ли вы опытным профессионалом или только начинаете, это руководство предоставит вам множество методов, которые облегчат вашу жизнь. Итак, начнём!

Метод 1: document.getElementsByClassName()
Первый метод, который мы рассмотрим, — это надежная функция getElementsByClassName(). Он возвращает живую HTML-коллекцию элементов, соответствующих определенному имени класса. Вот пример:

const elements = document.getElementsByClassName('my-class');

Метод 2: document.querySelectorAll()
Далее у нас есть мощная функция querySelectorAll(). Этот метод позволяет выбирать элементы с помощью селекторов CSS, включая имена классов. Он возвращает статический NodeList совпадающих элементов. Посмотрите:

const elements = document.querySelectorAll('.my-class');

Метод 3: document.getElementsByTagName() + Array.from()
Если вы предпочитаете более старый подход, вы можете объединить getElementsByTagName()с Array.from()для выбора элементов по классу. Вот как это можно сделать:

const elements = Array.from(document.getElementsByTagName('*')).filter(el => el.classList.contains('my-class'));

Метод 4: использование Array.from() + оператор распространения
Другой способ выбора элементов по классу — использование Array.from()в сочетании с оператором распространения. Вот пример:

const elements = [...document.getElementsByClassName('my-class')];

Метод 5: использование querySelector() с селектором классов
Если вам нужно выбрать только один элемент определенного класса, вы можете использовать querySelector()с селектором классов. Вот пример:

const element = document.querySelector('.my-class');

Метод 6: использование метода match()
Наконец, у нас есть метод matches(), который позволяет проверить, соответствует ли элемент определенному селектору, включая имена классов. Вот как вы можете его использовать:

const elements = Array.from(document.getElementsByTagName('*')).filter(el => el.matches('.my-class'));

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

Надеюсь, это руководство оказалось для вас полезным и оно расширило ваш набор инструментов для манипуляций с DOM. Приятного кодирования!