JS метод Document.getElementsByClassName()

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

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

Використання getElementsByClassName() починається з виклику методу на об'єкті document або на будь-якому елементі DOM, що дозволяє отримати доступ до елементів з певним класовим іменем в межах вказаного контексту. Метод приймає один аргумент — рядок, що вказує ім'я класу або класи, розділені пробілами, для яких потрібно знайти елементи.

Наприклад, для зміни кольору тексту всіх елементів з класом highlight можна використати наступний код:

var elements = document.getElementsByClassName('highlight');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.color = 'blue';
}

У цьому прикладі метод getElementsByClassName() знаходить всі елементи з класом highlight і змінює колір їхнього тексту на синій. Використання циклу for дозволяє ітерувати через всю колекцію отриманих елементів і застосувати до них необхідні стилі.

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

Для складніших сценаріїв, таких як додавання подій до елементів з певним класом, метод getElementsByClassName() також може бути використаний ефективно. Розглянемо приклад, де до всіх кнопок з класом myButton додається обробник події для виведення повідомлення при їх натисканні:

var buttons = document.getElementsByClassName('myButton');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    alert('Кнопка натиснута!');
  });
}

У цьому прикладі, за допомогою методу getElementsByClassName(), отримано доступ до всіх кнопок з класом myButton, і для кожної кнопки встановлено обробник події click, що виводить сповіщення при її натисканні. Такий підхід демонструє гнучкість методу в організації взаємодії користувача з елементами сторінки.

правити

Порада

Враховуйте, що пошук елементів за класом з використанням getElementsByClassName() є чутливим до регістру. Тобто, якщо в HTML-документі клас визначено як "MyClass", а ви шукаєте "myclass", то елементи не будуть знайдені. Така точність дозволяє точно визначати і вибирати необхідні елементи у великих та складних документах.

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

Порада

Для ефективної роботи з отриманою колекцією елементів можна перетворити її на масив за допомогою методу Array.from(). Це дозволить вам використовувати різноманітні методи масивів, такі як forEach, map, filter, для більш зручної обробки елементів.

let elements = Array.from(document.getElementsByClassName("myClass"));
elements.forEach(element => {
    console.log(element.id);
});

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

Порада

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

let elements = document.getElementsByClassName("class1 class2");
console.log(elements.length); // Виведе кількість елементів, що мають обидва класи.

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

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

Синтаксис

getElementsByClassName(names)

Параметри

names

Рядок, що представляє назву(-и) класу(-ів) для пошуку; кілька назв класів розділяються пробілами.

автор: Bond

правити

Повернення

collection

Повертає живу колекцію HTMLCollection знайдених елементів, які відповідають вказаним класам. Колекція оновлюється автоматично, коли до документа додаються або з нього видаляються елементи з відповідними класами. Тип даних результату - HTMLCollection, який може бути порожнім, якщо елементи з вказаними класами не знайдені.

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

<!DOCTYPE html>
<html>
<head>
    <title>Динамічне додавання класів</title>
</head>
<body>
    <p>Динамічно стилізований текст 1</p>
    <p>Динамічно стилізований текст 2</p>
    <p>Текст без динамічної стилізації</p>
    <button onclick="addStyles()">Додати стилі</button>
    <script>
        function addStyles() {
            // Отримуємо всі параграфи на сторінці
            var paragraphs = document.getElementsByTagName('p');

            // Додаємо клас "dynamic-style" до перших двох параграфів
            for (var i = 0; i < paragraphs.length - 1; i++) {
                paragraphs[i].classList.add('dynamic-style');
            }

            // Отримуємо всі елементи з новим класом та змінюємо їх стиль
            var styledElements = document.getElementsByClassName('dynamic-style');
            for (var i = 0; i < styledElements.length; i++) {
                styledElements[i].style.color = 'blue';
                styledElements[i].style.fontWeight = 'bold';
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Зміна стилю за класом</title>
</head>
<body>
    <p class="highlight">Текст 1</p>
    <p class="highlight">Текст 2</p>
    <p>Текст без виділення</p>
    <script>
        // Отримуємо всі елементи з класом "highlight"
        var elements = document.getElementsByClassName('highlight');

        // Змінюємо колір тексту для кожного елемента
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.color = 'red';
        }
    </script>
</body>
</html>