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. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

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

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

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