Від автора: У даній статті ми поговоримо про JavaScript селекторах. Так само, як і document.getElementById селектор з відповідним id, getElementsByClassName збирає всі елементи зі сторінки з однаковим класом. Так як метод написаний в множині, getElementsByClassName збирає масив елементів, а не один результат, навіть якщо на сторінці знайдений лише один збігається елемент.
Технічно, getElementsByClassName повертає HTMLCollection, структуру, схожу на масив, але ним не є. Ця колекція оновлюється при будь-яких змінах в DOM; більшість методів, заснованих на масивах працюють так само. Якщо на сторінці у нас є:
То ми можемо отримати даний елемент (і всі інші з тим же класом) з допомогою getElementsByClassName. Як і у випадку з getElementById результат, зазвичай, міститься в змінну:
var totality = document.getElementsByClassName(“eclipse”);
Так само як і з getElementById, ім’я класу йде після точки в CSS селекторі. Перший слот у масиві результату можна показати в консолі:
totality[0]
>
Так як результат завжди є масивом, щоб обробити всі елементи, які необхідно запускати цикл. Зробити це можна за допомогою оператора циклу for, але є й інші способи:
for (var i = 0; i < totality.length; i++) {
// робимо що-небудь з totality;
}
Мультиплікативність
До одного елемента може бути застосовано кілька класів, і getElementsByClassName дозволяє нам проводити пошук елементів, визначені набором класів:
var totality = document.getElementsByClassName(“eclipse partial”);
Код JavaScript вище знайде тільки ті елементи, у яких присутні обидва класу eclipse і partial.
Область застосування і призначення
На відміну від document.getElementById getElementsByClassName може працювати з будь-якої області документа. Це значить, то ми можемо звузити нашу колекцію до дочірніх елементів конкретного тега. Приміром, якщо у нас є nav з декількома посиланнями, і у деяких посилань є однакові класи:
Home
Launch
Options
Hohmann Transfers
Belters
Якщо нам необхідно витягнути тільки посилання з класом multi і переконатися, що ці посилання відокремлені від інших усередині батьків з ідентифікатором #mainnav, можна написати наступний код:
var nav = document.getElementById(“mainnav”);
var navlinks = nav.getElementsByClassName(“multi”);
Або якщо нам не потрібно зберігати мінливу з ідентифікатором #mainnav:
var navlinks = document.getElementById(“mainnav”).getElementsByClassName(“multi”);
Висновок
Метод getElementsByClassName відмінно підтримується всіма сучасними браузерами, в тому числі і IE9+. Дуже корисний метод, поступається по гнучкості тільки querySelectorAll, який ми розглянемо в наступній статті.