Выборка элементов страницы в JavaScript

Всем доброго понедельника.

Статья, показывающая работу со свойствами элемента посредством JavaScript, должна была показать (я надаюсь на это) всю лёгкость манипулирования стилями. Там же говорилось о том, что стили применяются к конкретному элементу. А как его получить?

В JS существует несколько медотов, с помощью которых программисту предоставляется возможность получать выборки элементов. Речь идёт о группах getElement* и querySelector*.

Браузеры предоставляют следующие методы:

• getElementById — выборка одного элемента по его идентификатору (атрибут id);
• getElementsByClassName — поиск элементов по имени класса (атрибут class);
• getElementsByName — возвращает все элементы с указанным именем (атрибут name);
• getElementsByTagName — поиск группы элементов по тегу (названию);
• querySelector — выборка первого элемента по селекторам (имеются ввиду CSS селекторы);
• querySelectorAll — похоже на предыдущий, но возвращает все элементы, попадающие под условие.

Прежде всего, условимся с html кодом, на примере которого будем отрабатывать навыки. Это будет небольшая матрёшка из контейнеров div.

<div id="go" class="da">
    <div name="none" class="one da">one
        <div class="two da">two</div>
    </div>
    <div class="three da">three</div>
</div>

getElementById

Самый простой метод, знакомый, пожалуй, каждому. Для получения ссылки на элемент достаточно выполнить простой запрос:

var elem = document.getElementById('go');

После этого elem будет содержать ссылку на элемент с идентификатором #go (у нас это <div id="go">). Теперь можно совершать различные манипуляции, например, изменить цвет на красный:

elem.style.color = '#FF0000';

Важно! Атрибут id должен быть уникальным для всей страницы. Если вы решите присвоить двум элементам одинаковый идентификатор, фунция всё равно вернёт 1 элемент. Какой? Зависит от многих факторов. Ключевой момент — вы не можете быть уверены, что получите определённый объект. Поэтому примите за правило: id обязан быть уникальным.

Метод применим только к объекту document. Просто запомните вызов метода: document.getElementById(id).

getElementsByClassName

Возвращает группу элементов (поэтому и Elements), в которых присутствует искомый класс. Отличительная особенность от предыдущего метода — дозволено указать элемент, относительно которого начинать поиск. Это может быть и document — выбирать элементы на всей странице, либо указатель на определённый блок. Например, получим все элементы с классом .da внутри контейнера #go.

var elem = document.getElementById('go');
var elems = elem.getElementsByClassName('da');

После выполнения кода в массиве elems будут содержаться 3 элемента: .one, .two и .three.

Если же требуется получить всё на странице, достаточно сделать так:

var elems = document.getElementsByClassName('da');

К трём элементам выше добавится ещё один — #go (как видно из кода, ему тоже присвоен класс .da).

К сожалению, данный метод не поддерживается в Internet Explorer версии 8 и ниже. Это значит, что все обладатели Windows XP оказываются в пролёте. Можно сделать свою реализацию функции, которая оббежит все теги на странице и отберёт лишь те, className которых соответствует условию, но есть более удобные методы для работы.

getElementsByName

Метод возвращает элементы, у которых атрибут name соответствует заданному имени.

var elems = document.getElementsByName('none');

Переменная elems после выполнения будет содержать 1 элемент со ссылкой на div.one (ему присвоено имя none).

Увы, и здесь не обошлось без ложки дёгтя. IE старых версий возвращает лишь те элементы, для которых атрибут name определён спецификацией, например: input, a. Приведённый код ничего не найдёт.

getElementsByTagName

Ищет элементы по имени тега. Метод применяться как к document, так и к конкретному элементу.

var elem = document.getElementById('go');
var elems = elem.getElementsByTagName('div');

Вернёт массив из трёх элементов: .one, .two, .three.

Для выборок используется редко. Наиболее частое применение — добавление нового элемента в цепочку. Пример ниже добавит элемент div.zero перед текстом one.

var new_div = document.createElement('div');
new_div.className = 'zero';
new_div.innerHTML = 'zero';
elems[0].insertBefore(new_div, elems[0].firstChild);

Ещё одна интересная особенность — если вместо названия тега указать звёздочку *, поиск производится по всем тегам.

var elems = document.getElementsByTagName('*');

Будут возвращены все теги на странице.

querySelector

Вот мы и подошли к серьёзным методам.

querySelector возвращает первый элемент, соответствующий условию.

var elem = document.querySelector('#go div');

Код вернёт ссылку на div.one. Про селекторы мы уже говорили, ссылка на статью в начале.

Может возникнуть вопрос, в чём преимущество данной функции? Если элемент имеет уникальный идентификатор, быстрее (и правильнее) воспользоваться document.getElementById(id). Но в html такое встречается нечасто. Поэтому, для матрёшек удобнее указывать привычную цепочку селекторов.

querySelectorAll

Последний метод, но не по значению. Всего одним запросом вы получаете целую пачку элементов, расположенных в разных блоках, принадлежащие определённому классу и т. п.

var elems = document.querySelectorAll('#go div.two, .one');

Вернёт 2 элемента: .one и .two. Метод примечателен тем, что отсеивает дубли — можно не беспокоиться, что в результирующую выборку будут включены элементы, соответствующие каждой цепочке селекторов. Например:

var elems = document.querySelectorAll('#go div, .one');

Будет содержать 3 элемента: .one, .two и .three, а не 4, как можно было подумать (из-за второго правила .one).

Оба метода querySelector* применимы не только к document, но и к конкретному элементу. В некоторых ситуациях это очень удобно.

Было бы просто свинством, если я, рассказав про выборки, не привёл бы пример их использования. Единичные элементы, возвращаемые с помощью getElementById или querySelector, уже являются ссылкой и готовы к дальнейшим манипуляциям. Остальные выборки возвращают массивы. Но это не такая большая проблема, как может показаться; просто пробежим по всем элементам и каждому присвоим нужное свойство. Пусть это будет что-то совсем простое — сделать цвет текста красным.

for (var i = 0, cnt = elems.length; i < cnt; i++) {
    elems[i].style.color = '#FF0000';
}

Вот и всё. Теперь и вы, уважаемый читатель, познали дзэн и способны делать удивительные вещи.