JS метод Element.getElementsByClassName()

Загальний опис

Element.getElementsByClassName() - це метод, який дозволяє отримати колекцію (псевдомасив) елементів, що відповідають заданому імені класу CSS. Цей метод є корисним для вибору та маніпулювання групою елементів, які мають спільний клас, без необхідності вибирати їх окремо. Він часто використовується для роботи з елементами інтерфейсу, такими як кнопки, посилання або блоки контенту, які мають однакове форматування або поведінку.

Використання методу getElementsByClassName() є досить простим. Він приймає один аргумент - рядок, що представляє ім'я класу CSS. Наприклад, щоб отримати всі елементи з класом "button" у межах елемента document.body, можна використати такий код:

const buttons = document.body.getElementsByClassName('button');

Результатом буде колекція HTMLCollection, що містить всі відповідні елементи. Ця колекція є "живою", що означає, що вона автоматично оновлюється, якщо елементи додаються або видаляються з документа.

Метод getElementsByClassName() можна застосовувати не лише до document.body, а до будь-якого елемента на сторінці. Наприклад, якщо у вас є елемент <div id="container"> з кількома дочірніми елементами, що мають клас "item", ви можете отримати їх таким чином:

const container = document.getElementById('container');
const items = container.getElementsByClassName('item');

Також можна використовувати кілька імен класів, розділених пробілом, щоб вибрати елементи, що мають всі ці класи. Наприклад:

const specialItems = document.body.getElementsByClassName('item special');

Це поверне колекцію елементів, що мають обидва класи "item" та "special".

Після того, як ви отримали колекцію елементів, ви можете маніпулювати ними різними способами. Наприклад, змінити стилі, додати або видалити класи, змінити вміст або обробляти події. Ось приклад, який змінює колір тексту всіх елементів з класом "highlight":

const highlightedElements = document.getElementsByClassName('highlight');
for (let i = 0; i < highlightedElements.length; i++) {
  highlightedElements[i].style.color = 'red';
}

Слід зазначити, що метод getElementsByClassName() повертає "живу" колекцію, що означає, що вона автоматично оновлюється при змінах у документі. Якщо вам потрібно працювати з "статичним" набором елементів, який не змінюватиметься при змінах у документі, вам слід перетворити колекцію на масив, використовуючи Array.from() або поширення (...).

Загалом, Element.getElementsByClassName() є потужним інструментом для вибору та маніпулювання групами елементів на основі їх класів CSS, що робить його корисним для різноманітних завдань веброзробки.

Синтаксис

getElementsByClassName(names)

Параметри

*names

Рядок, що містить одне або кілька імен класів для пошуку, розділених пробілами. Метод поверне всі елементи, що мають всі зазначені класи.

Return

HTMLCollection

Повертає об'єкт HTMLCollection, що надає "живий" список усіх елементів, які належать до всіх класів, зазначених в аргументі. Цей список автоматично оновлюється при змінах у документі. Елементи в колекції можна перебирати за допомогою циклу або використовувати індексацію для доступу до окремих елементів. Однак колекція є "живою", тому для роботи зі статичним набором елементів її слід перетворити на масив.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

<div class="box">Елемент 1</div>
<p>Інший елемент</p>
<div class="box">Елемент 2</div>
<div class="box">Елемент 3</div>

<script>
// Отримуємо колекцію елементів з класом "box"
const boxElements = document.getElementsByClassName('box');

// Перебираємо колекцію та змінюємо стиль елементів
for (let i = 0; i < boxElements.length; i++) {
  boxElements[i].style.backgroundColor = 'yellow';
  boxElements[i].style.padding = '10px';
}
</script>

<button id="toggleButton">Змінити стан</button>
<div class="box active">Елемент 1</div>
<div class="box">Елемент 2</div>
<div class="box active">Елемент 3</div>

<script>
const toggleButton = document.getElementById('toggleButton');
const boxElements = document.getElementsByClassName('box');
let isActive = true;

function toggleElementsClass() {
  for (let i = 0; i < boxElements.length; i++) {
    if (isActive) {
      boxElements[i].classList.remove('active');
    } else {
      boxElements[i].classList.add('active');
    }
  }
  isActive = !isActive;
}

toggleButton.addEventListener('click', toggleElementsClass);
</script>