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

Опубликовано: 07.10.2017

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

Урок 2. Javascript. Основы js, работа с HTML элементами, DOM

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

Статья, показывающая работу со свойствами элемента посредством 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 обязан быть уникальным.

IRC (Internet Relay Chat)
rss