JavaScript селектори: getElementsByClassName

47

Від автора: У даній статті ми поговоримо про 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, який ми розглянемо в наступній статті.