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

Дата публикации: 2016-03-24

От автора: В данной статье мы поговорим о JavaScript селекторах. Так же, как и document.getElementById селектор с соответствующим id, getElementsByClassName собирает все элементы со страницы с одинаковым классом. Так как метод написан в множественном числе, getElementsByClassName собирает массив элементов, а не один результат, даже если на странице найден всего один совпадающий элемент.

Технически, getElementsByClassName возвращает HTMLCollection, структуру, похожую на массив, но им не являющуюся. Эта коллекция обновляется при любых изменениях в DOM; большинство методов, основанных на массивах работают так же. Если на странице у нас есть:

<div class="eclipse"> ... </div>

1	<div class="eclipse"> ... </div>

То мы можем получить данный элемент (и все остальные с тем же классом) с помощью getElementsByClassName. Как и в случае с getElementById результат, обычно, помещается в переменную:

var totality = document.getElementsByClassName("eclipse");

1	var totality = document.getElementsByClassName("eclipse");

Так же как и с getElementById, имя класса идет после точки в CSS селекторе. Первый слот в массиве результата можно показать в консоли:

totality[0]
> <div class="eclipse"> ... </div>

1 2	totality[0] > <div class="eclipse"> ... </div>

Так как результат всегда является массивом, чтобы обработать все элементы, необходимо запускать цикл. Сделать это можно с помощью оператора цикла for, но есть и другие способы:

for (var i = 0; i < totality.length; i++) {
  // делаем что-нибудь с totality[i];
}

for (var i = 0; i < totality.length; i++) {

// делаем что-нибудь с totality[i];

}

Мультипликативность

К одному элементу может быть применено несколько классов, и getElementsByClassName позволяет нам производить поиск элементов с определенны набором классов:

var totality = document.getElementsByClassName("eclipse partial");

1	var totality = document.getElementsByClassName("eclipse partial");

Код JavaScript выше найдет только те элементы, у которых присутствуют оба класса eclipse и partial.

Область применения и назначение

В отличие от document.getElementById getElementsByClassName может работать из любой области документа. Это значит, то мы можем сузить нашу коллекцию до дочерних элементов конкретного тега. К примеру, если у нас есть nav с несколькими ссылками внутри, и у некоторых ссылок есть одинаковые классы:

<nav id="mainnav">
    <a href="#">Home</a>
    <a href="#">Launch</a>
    <a href="#" class="multi">Options</a>
    <a href="#" class="multi">Hohmann Transfers</a>
    <a href="#" class="special">Belters</a>
</nav>

<a href="#">Launch</a>

<a href="#" class="multi">Options</a>

<a href="#" class="multi">Hohmann Transfers</a>

<a href="#" class="special">Belters</a>

</nav>

Если нам необходимо вытянуть только ссылки с классом multi и убедиться, что эти ссылки отделены от других внутри родителя с идентификатором #mainnav, можно написать следующий код:

var nav = document.getElementById("mainnav");
var navlinks = nav.getElementsByClassName("multi");

1 2	var nav = document.getElementById("mainnav"); var navlinks = nav.getElementsByClassName("multi");

Или если нам не нужно сохранять переменную с идентификатором #mainnav:

var navlinks = document.getElementById("mainnav").getElementsByClassName("multi");

1	var navlinks = document.getElementById("mainnav").getElementsByClassName("multi");

Заключение

Метод getElementsByClassName отлично поддерживается всеми современными браузерами, в том числе и IE9+. Очень полезный метод, уступающий по гибкости только querySelectorAll, который мы рассмотрим в следующей статье.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Метки: JavaScript