Выборка элементов страницы в JavaScript
Опубликовано: 07.10.2017
Всем доброго понедельника.
Статья, показывающая работу со свойствами элемента посредством JavaScript, должна была показать (я надаюсь на это) всю лёгкость манипулирования стилями. Там же говорилось о том, что стили применяются к конкретному элементу. А как его получить?
В JS существует несколько медотов, с помощью которых программисту предоставляется возможность получать выборки элементов. Речь идёт о группах getElement* и querySelector*.
Браузеры предоставляют следующие методы:
getElementById — выборка одного элемента по его идентификатору (атрибут id); getElementsByClassName — поиск элементов по имени класса (атрибут class); getElementsByName — возвращает все элементы с указанным именем (атрибут name); getElementsByTagName — поиск группы элементов по тегу (названию); querySelector — выборка первого элемента по селекторам (имеются ввиду CSS селекторы); querySelectorAll — похоже на предыдущий, но возвращает все элементы, попадающие под условие.Прежде всего, условимся с html кодом, на примере которого будем отрабатывать навыки. Это будет небольшая матрёшка из контейнеров div.
Вебинар «Выбор и поиск элементов на странице с помощью jQuery»
<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
Самый простой метод, знакомый, пожалуй, каждому. Для получения ссылки на элемент достаточно выполнить простой запрос:
jQuery. Урок 27. Перебор элементов страницы jQuery.each
var elem = document.getElementById('go');
После этого elem будет содержать ссылку на элемент с идентификатором #go (у нас это <div id="go"> ). Теперь можно совершать различные манипуляции, например, изменить цвет на красный:
elem.style.color = '#FF0000';Важно! Атрибут id должен быть уникальным для всей страницы. Если вы решите присвоить двум элементам одинаковый идентификатор, фунция всё равно вернёт 1 элемент. Какой? Зависит от многих факторов. Ключевой момент — вы не можете быть уверены, что получите определённый объект. Поэтому примите за правило: id обязан быть уникальным.