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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

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

Заключение

Метод 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree