QuerySelector: примеры (JAVASCRIPT)

Простые примеры использования

Выбор элемента по идентификатору:

// Возвращает элемент с id="header"
let elem = document.querySelector('#header');
console.log(elem);

// Результат: <div id="header">...</div> или null

Выбор по классу:

// Возвращает первый элемент с class="menu-item"
let item = document.querySelector('.menu-item');

Выбор по тегу:

// Возвращает первый элемент <p> в документе
let paragraph = document.querySelector('p');

Использование сложного селектора:

// Возвращает первый элемент <li> с классом "active", находящийся внутри <ul>
let li = document.querySelector('ul li.active');

Выбор по атрибуту:

// Возвращает первый элемент <input> с типом "text"
let input = document.querySelector('input[type="text"]');

Работа с группой селекторов:

// Возвращает первый элемент, который является либо h1, либо .title
let heading = document.querySelector('h1, .title');

Альтернативные методы в JavaScript

querySelectorAll() возвращает статическую коллекцию (NodeList) всех элементов, соответствующих селектору. Применяется, когда нужно работать с группой элементов.

getElementById() находит элемент по его уникальному идентификатору. Работает быстрее, чем querySelector('#id'), но предназначен только для ID.

getElementsByClassName() возвращает живую коллекцию элементов по имени класса. Подходит для быстрого доступа ко всем элементам с заданным классом.

getElementsByTagName() возвращает живую коллекцию элементов по имени тега. Полезен для выборки всех элементов определенного типа.

Методы, возвращающие живые коллекции (getElementsBy*), могут иметь преимущества в производительности при частых изменениях DOM, однако querySelector и querySelectorAll более универсальны благодаря поддержке сложных CSS-селекторов.

Распространенные ошибки

Ошибка возникает, когда забывают, что метод возвращает только первый элемент. Для работы со всеми элементами следует использовать querySelectorAll.

// Неправильно: попытка добавить класс всем элементам
let items = document.querySelector('.item');
items.classList.add('new'); // Ошибка, если элементов несколько

// TypeError: items.classList is undefined (если элементов нет) или манипуляция только с первым элементом

Другая ошибка — отсутствие проверки на null перед манипуляциями с элементом.

let elem = document.querySelector('#non-existent');
elem.style.color = 'red'; // Ошибка, если elem === null

// TypeError: Cannot read properties of null (reading 'style')

Неправильное формирование строки селектора для элементов со специальными символами в идентификаторах или классах.

// Элемент с id="item-1"
let elem = document.querySelector('item-1'); // Не хватает символа #
let elemCorrect = document.querySelector('#item-1');

Изменения в последних версиях

Спецификация Selectors API, в которую входит метод querySelector(), стабильна. Существенных изменений в поведении метода в последних версиях ECMAScript не было. Однако, с развитием стандарта CSS появляются новые псевдоклассы и псевдоэлементы (например, :focus-visible, :is()), которые становятся доступны для использования в селекторах по мере их реализации в браузерах. Это расширяет возможности метода без изменения его базового синтаксиса.

Расширенные примеры применения

Поиск элемента внутри другого элемента:

let container = document.querySelector('#container');
let innerButton = container.querySelector('button.submit');
// Поиск ведется только внутри элемента container

Использование псевдоклассов:

// Выбор первого отмеченного чекбокса
let checked = document.querySelector('input[type="checkbox"]:checked');
// Выбор первого непустого элемента input
let filled = document.querySelector('input:not(:placeholder-shown)');

Работа с псевдоэлементами невозможна, так как они не являются частью DOM.

Пример с функциональным селектором :is():

// Выбор первого абзаца, находящегося в секции или статье
let p = document.querySelector(':is(section, article) p:first-of-type');

Поиск элемента, игнорируя регистр в атрибуте (с использованием модификатора i):

// CSS селектор уровня 4 поддерживает [attribute="value" i]
let elem = document.querySelector('[data-role="button" i]');
// Найдет элемент с data-role="Button", "BUTTON" и т.д.

Комбинирование селекторов для точного выбора:

// Выбор первой картинки с атрибутом alt, которая является прямым потомком div с классом gallery
let img = document.querySelector('div.gallery > img[alt]:first-child');

Имитация поиска по тексту (используя селектор по атрибуту):

// Выбор ссылки, у которой атрибут href содержит слово "example"
let link = document.querySelector('a[href*="example"]');

Аналоги функции в других языках

В Python с библиотекой BeautifulSoup для парсинга HTML используется метод select_one(), который принимает CSS-селектор и возвращает первый найденный элемент.

from bs4 import BeautifulSoup
soup = BeautifulSoup(html_doc, 'html.parser')
element = soup.select_one('div.content')

В PHP с библиотекой DOMDocument можно применять метод querySelector() из класса DOMXPath, но чаще используют getElementById или getElementsByTagName.

$dom = new DOMDocument();
@$dom->loadHTML($html);
$xpath = new DOMXPath($dom);
$elements = $xpath->query("//div[@class='content']");

В jQuery (библиотека JavaScript) функция $() осуществляет выборку элементов, аналогичную querySelectorAll, но возвращает объект jQuery с расширенной функциональностью.

// Выбор первого элемента div с классом box
let $elem = $('div.box').first();

В MySQL нет прямых аналогов, так как это СУБД, но для выборки данных по условию используется оператор SELECT с WHERE.