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, що робить його корисним для різноманітних завдань веброзробки.

правити

Порада

Якщо ви плануєте часто використовувати вибірку елементів за класом, розгляньте можливість кешувати результат, щоб уникнути повторних запитів до DOM. Наприклад: const cachedElements = document.getElementsByClassName('my-class'); function updateElements() { [...cachedElements].forEach(el => { /* оновлення елементів */ }); }.

автор: Bond правити

Порада

Ви можете використовувати кілька імен класів, розділених пробілом, щоб вибрати елементи, які мають всі ці класи. Наприклад: const specialItems = document.body.getElementsByClassName('item special'); поверне елементи з обома класами "item" та "special".

автор: Bond правити

Порада

Пам'ятайте, що getElementsByClassName() шукає елементи лише в межах вказаного елемента та його нащадків. Якщо вам потрібно отримати всі елементи з певним класом у всьому документі, застосуйте метод до document.documentElement або document.body.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

getElementsByClassName(names)

Параметри

names

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

автор: Bond

правити

Повернення

HTMLCollection

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

автор: Bond

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	3	3.1	9.5	16	9*

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	2

Приклади

+ запропонувати свій приклад у пісочниці

<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>