QuerySelector: как выбрать элемент страницы
При работе с объектной моделью документа страницы, навык №1, которым должен обладать каждый веб-разработчик — получение DOM-элемента средствами JavaScript. Рассмотрим рабочие методы. Поехали!
Неплохо бы понимать, что 3 основных метода поиска элементов принадлежат встроенному в браузер объекту document:
- querySelector – универсальный метод
- getElementById – получение по атрибуту id
- getElementsByClassName – получение по атрибуту class
Обратите внимание: все методы выполняют одну и ту же задачу – получение HTML-тега и его свойств из DOM. Однако делают это по-разному. Но обо всём по порядку.
Универсальный «нож» — querySelector
В качестве аргумента принимает строку из HTML-атрибута любой сложности и возвращает такой элемент (или группу элементов).
Пример:
const about = document.querySelector(«#about») // элемент с id #about
const title = document.querySelector(«h1.title») // заголовок первого уровня с классом title
Обратите внимание на метод querySelectorAll, который возвращает коллекцию всех элементов, удовлетворяющих селектору:
const img = document.querySelectorAll(«img.selfie») // все картинки с классом selfie
querySelector и querySelectorAll – мощные методы поиска. С их помощью можно найти элементы любой сложности, с несколькими атрибутами. Однако по возможности делать так не рекомендуется, чтобы избежать сложности кода.
Получаем по классу – getElementsByClassName
В отличие от querySelector этот метод всегда возвращает массивоподобную коллекцию – оно и логично: элементов с атрибутом класса обычно более одного на странице.
const titles = document.getElementsByClassName(«title») // все элементы
классом title
const redTitles = document.getElelementsByClassName(«red title») // все элементы с классом title и red
const subtitles = document
.querySelectorAll(«.section»)
.getElementsByClassNames(«titles») // не забываем, что можно «чейнить»
В последнем примеры видим так называемый «чейнинг» — querySelector возвращает коллекцию элементов, а getElementsByClassNames ищет в них элементы с классом titles. С помощью чейнинга можно избежать селекторов вложенности и сделать код чуть более читаемым, однако увлекаться также не стоит.
Вычисляем по id – getElementById
Обратите внимание: метод возвращает исключительно один элемент. Логично, ведь DOM-элемент с данным id атрибутом может быть только один на весь документ. Иначе поведение браузера становится непредсказуемым.
const burgerMenu = document.getElementById(«burger») // получаем «бургер» по id
Важно: в методах getElementById и getElementsByClassName не требуется знак решетки и точки соответственно.
«Старые» методы выбора элементов
Если последние два метода ещё можно встретить в легаси-коде (но применять всё-таки не рекомендуется), то следующие два метода давно пылятся на антресоли инструментов JavaScript разработчика. Даже в старом коде встретить их – находка:
- getElementsByTagName – получение по названию тега
- getElementsByName – получение по атрибуту name
Что применять сегодня?
Метод document.querySelector и его «расширенная» версия querySelectorAll сегодня являются наиболее используемыми при выборе элементов с HTML-страницы. Остальные методы – пережиток прошлого, которые со временем совсем затрутся.
Почему не рекомендуется использовать JQuery?
Всё больше и больше кода переписывается на «ванильный» JavaScript по одной простой причине: скорость. JQquery – довольно тяжеловесная библиотека. Времена меняются. Сегодня стоит хорошенько подумать, прежде чем подключать её «доллар» ради нескольких получений HTML-элементов.
