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

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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

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

Заключение

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

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

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

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree