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(names)Параметри
- *
names Рядок, що представляє назву(-и) класу(-ів) для пошуку; кілька назв класів розділяються пробілами.
Return
collectionПовертає живу колекцію
HTMLCollectionзнайдених елементів, які відповідають вказаним класам. Колекція оновлюється автоматично, коли до документа додаються або з нього видаляються елементи з відповідними класами. Тип даних результату -HTMLCollection, який може бути порожнім, якщо елементи з вказаними класами не знайдені.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
3 |
3.1 |
9.5 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
2 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі метод getElementsByClassName('theme-text') використовується для отримання усіх елементів з вказаним класом. За допомогою кнопок користувач може перемикати тему сторінки зі світлої на темну. JavaScript-функція changeTheme динамічно додає або видаляє класи, що застосовують відповідні стилі до усіх відповідних елементів, тим самим демонструючи ефективне управління стилями для групи елементів.
У цьому прикладі ми спостерігаємо базове використання методу getElementsByClassName(), який дозволяє отримати доступ до всіх елементів документа, що мають вказаний клас. Ми змінимо колір тексту для всіх елементів з класом highlight на червоний. Цей метод повертає живу колекцію елементів, що означає, що будь-які зміни у DOM, які впливають на елементи з цим класом, будуть автоматично відображені у колекції.
<!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>У цьому прикладі ми бачимо, як можна комбінувати різні методи та властивості DOM, щоб ефективно маніпулювати елементами на сторінці. Метод getElementsByClassName() стає особливо корисним, коли потрібно змінити або додати стилі до групи елементів, які поділяють загальний клас. Це дозволяє розробникам писати більш динамічний і гнучкий код.
<!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>