Поиск элементов по классу с getElementsByClassName() в JavaScript

JavaScript предоставляет разные способы поиска элементов на странице. Один из самых полезных - поиск по классу с помощью метода getElementsByClassName(). Этот метод позволяет быстро получить все элементы с нужным классом или классами. Давайте разберемся, как использовать getElementsByClassName() для упрощения работы с DOM и оптимизации JavaScript кода.

Основы работы с getElementsByClassName()

Метод getElementsByClassName() позволяет найти все элементы на странице с указанным классом или классами. Этот метод доступен как для объекта document, так и для любого другого элемента DOM.

Синтаксис выглядит так:

let elements = document.getElementsByClassName(names); // или let elements = someElement.getElementsByClassName(names);

В качестве аргумента метод принимает строку с одним или несколькими именами классов. Для поиска элементов, которые содержат все перечисленные классы, классы разделяются пробелом.

Например:

document.getElementsByClassName('class1 class2');

найдет элементы с классами class1 и class2 одновременно.

Метод возвращает коллекцию найденных элементов, даже если ничего не нашлось. Это похоже на массив, но не является массивом. Главное отличие в том, что эта коллекция живая. Она всегда актуальна и автоматически обновляется при изменениях в DOM.

Например:

let elements = document.getElementsByClassName('someclass'); // коллекция изменится, если добавить/удалить элементы с классом someclass 

Это важное отличие от статических коллекций, возвращаемых методами вроде querySelectorAll.

Сравнение с другими методами поиска

Похожим на getElementsByClassName() является метод getElementById(). Оба ищут элементы на всей странице и возвращают коллекцию.

Но есть несколько ключевых различий:

• getElementById ищет только по атрибуту id, а getElementsByClassName по классам.
• getElementById возвращает один элемент или null. А getElementsByClassName может вернуть много элементов.
• getElementById всегда возвращает статическую коллекцию из одного элемента. А getElementsByClassName - живую коллекцию.

Еще один распространенный метод - querySelectorAll. Он позволяет искать по любым CSS-селекторам, в том числе и по классу. Но querySelectorAll всегда возвращает статическую коллекцию элементов.

Таким образом, getElementsByClassName - единственный метод, который:

• ищет элементы по классу
• возвращает живую коллекцию

Это делает его незаменимым во многих ситуациях.

Продвинутое использование getElementsByClassName()

Рассмотрим более сложные приемы работы с методом getElementsByClassName().

Поиск элементов в контексте

Метод можно вызывать не только на document, но и на любом другом элементе:

// найти элементы с классом .inner только внутри элемента block let elements = block.getElementsByClassName('inner'); 

Это позволяет искать элементы только внутри конкретного контекста, а не по всей странице.

Получение конкретного элемента из коллекции

К коллекции элементов можно обратиться как к массиву:

let elements = document.getElementsByClassName('someclass'); let firstElement = elements[0]; let secondElement = elements[1]; // получить элемент по индексу 

Это позволяет получить конкретный элемент для дальнейшей работы с ним.

Перебор элементов коллекции

Чтобы применить действия ко всем найденным элементам, коллекцию нужно перебрать:

let elements = document.getElementsByClassName('someclass'); // перебрать циклом for(let i = 0; i < elements.length; i++) { // элементы elements[i] } // перебрать дляЕацх elements.forEach(function(item) { // элемент item }); 

Это позволит обработать каждый элемент, например, установить обработчики событий или изменить стили.

Работа с динамическими классами

Изменение классов элементов на лету тоже отразится в коллекции:

// найдем элемент let elements = document.getElementsByClassName('someclass'); // удалим класс "someclass" у первого элемента elements[0].classList.remove('someclass'); // коллекция обновится, теперь элементы[0] - неизвестный элемент 

Таким образом реализуется реактивный поиск элементов при изменении классов.

Лучшие практики использования getElementsByClassName()

Рассмотрим рекомендации по оптимальному использованию метода getElementsByClassName().

Выбор подходящих классов

Классы элементов стоит назначать так, чтобы по ним можно было однозначно идентифицировать элемент и его назначение. Например: product-card, user-avatar и т.д.

Поиск только нужных элементов

Не стоит искать по слишком общим классам вроде .item или .box. Лучше использовать более конкретные классы, чтобы получить только действительно нужные элементы.

Избегание конфликтов с другими методами

Не рекомендуется использовать getElementsByClassName() если у элементов есть уникальные id. В таких случаях лучше применять getElementById().

Читабельность кода

Стоит выбирать понятные имена переменных для коллекции элементов, например:

// плохо let el = document.getElementsByClassName('product'); // хорошо let productCards = document.getElementsByClassName('product'); 

Это повысит читабельность кода.