Метод getElementsByClassName() використовується для вибору або отримання елементів через значення імені класу. Цей метод DOM повертає об’єкт, схожий на масив, який складається з усіх елементів, що мають вказане ім’я класу. Викликаючи метод getElementsByClassName() для будь-якого конкретного елемента, він шукатиме весь документ і повертатиме лише ті елементи, які відповідають вказаному чи заданому імені класу.
Синтаксис
var ele=document.getELementsByClassName('name');
Тут ім'я є обов'язковим аргументом, який потрібно передати. Це рядок, який визначає або одне ім’я класу, або декілька імен класів для відповідності.
Приклад методу getElementsByClassName().
Давайте розглянемо кілька прикладів, щоб знати та зрозуміти практичну реалізацію методу.
приклад
Це проста реалізація класу, яка повертає об’єкт, схожий на масив, після виклику змінної x.
<h5>DOM Methods </h5> This is a simple class implementation var x=document.getElementsByClassName('Class'); document.write('On calling x, it will return an arrsy-like object: <br>'+x);
Вихід:
Так само ми можемо реалізувати метод getElementsByClassName() для повернення колекцій елементів для кількох класів.
Різниця між методами getElementsByClassName(), querySelector() і querySelectorAll()
getElementsByClassName(): Він зіставляє елементи з указаною назвою класу та повертає набір відповідних елементів. Повернуті елементи є живою колекцією елементів HTML. Ці живі елементи можна додатково оновити, якщо в об’єктну модель документа внести будь-які зміни.
querySelector(): Він повертає лише один елемент, який відповідає вказаному імені класу. Якщо він не знаходить жодного відповідного елемента, він повертає null.
Головне, що слід розуміти, полягає в тому, що всі вищеописані методи повертають один елемент або список, але метод getELementsByClassName() обслуговує динамічний оновлення, а інші два методи служать для статичний .